众所周知，我们现在大多采用前后端分离的模式来开发项目，前端项目个人采用vue做的比较多一点，既然是前端，那肯定只是负责渲染展示数据，那么问题来了，数据从哪里来？开发阶段大多数据采用mock做一些假数据来满足暂时的需求，但是最终生产上的数据肯定是从后端接口获取而来。如何在vue项目上从后端获取方式呢，就是我们本章的主角--AXIOS。

一、前端从后端获取数据的方式通常采用http/https的方式

        方法通常有GET、POST、PUT、DELETE、PATCH这五种；

        GET==>用来获取数据，

        POST==> 是用来新增数据表单提交或文件上传

        DELETE==>是用来删除数据

        PUT==>是用来更新数据（所有数据推送到后端）

        PATCH==>是用来更新数据（只将修改的数据推送到后端）

    

二、从前端请求后端接口获取数据格式：

        GET方法：

                1、axios.get(url,config).then(res=>{数据处理逻辑}).catch(err=>{错误处理逻辑})

                2、axios({method:'get',url:'xxxxx',config}).then(res=>{数据处理逻辑}).catch(err=>{错误处理逻辑})

                可以在config中设置基础URL，超时时间、传参方式、请求头等信息，但是传参方式一般为params，请求参数在url中。

        POST方法（appcation/json或者form-data）：

                1、①appcation/json方式

                                let data={id:12}

                                axios.post(url,data,config).then(res=>{数据处理逻辑}).catch(err=>{错误处理逻辑})

                       ②appcation/json方式：

                                let data={id:12}

                                axios({method:'post',url,data:data,config}).then(res=>{数据处理逻辑}).catch(err=>{错误处理逻辑})

                2、①form-data方式

                                let data={id:12}

                                let formData = new FormData()

                                for(let key in data){

                                        formData.append(key,data[key])

                                }

                                 axios.post(url,formData,config).then(res=>{数据处理逻辑}).catch(err=>{错误处理逻辑})

                      ②form-data方式

                                let data={id:12}

                                let formData = new FormData()

                                for(let key in data){

                                        formData.append(key,data[key])

                                }

                                axios({method:'post',url,formData:formData,config}).then(res=>{数据处理逻辑}).catch(err=>{错误处理逻辑})

                        post请求同样可以在在config中设置基础URL，超时时间、传参方式、请求头等信息，但是传参方式一般用data，参数在请求体中

        PUT和PATCH方式：                

                put和patch跟post一样，就方法不一样而已，参考post方法

        DELETE方式：

                类似get方式，就方法不一样而已，参考get方法。可以在config中设置基础URL，超时时间、传参方式、请求头等信息，注意请求参数，如果在url中则config中采用params方式传参，如果在请求体中，则config中采用data方式传参。

三、axios并发请求

                并发请求：同时进行多个请求，并统一处理返回值，比如说：我们需要同时请求用户信息和商品信息，然后将获得的两种信息进行拼接等统一加工到一起。这涉及到axios的两种方法：axios.all(arr[])和axios.spread()。

        axios.all()和axios.spread()方法

                其中axios.all(arr[])这个方法的作用就是同时去请求，它的参数是数组，数组的内容就是请求方式和路径，比如：arr[] =[axios.get(url),axios.post(url,data,config)]

                另一个axios.spread((A,B)=>{})这个方法是用来处理返回的数据的，其中{}中是具体的处理逻辑，A就是第一个请求的返回值，B就是第二个请求的返回值。

                具体用法：

                axios.all([axios.get(url),axios.post(url,data,config)]).then(axios.spread((A,B)=>{}))

四、axios实例

                为什么要用axios实例呢，可能你的项目中涉及到多个接口地址，而且每种的接口的超时时间等还都不一样，那么这个时候，你就可以针对某个接口地址某种超时时间来创建独立的axios实例，后期你就可以直接这种特殊axios实例去进行数据请求了。

                具体用法：

                let instance = axios.create(config);

                instance.get(url).then(res=>{数据处理逻辑}).catch(err=>{错误处理逻辑})

五、关于请求中的config   

                config的格式为：

                        {

                        baseURL:'http:/xxxxxx', //基础url

                        timeout:6000,  //超时时间

                        url:xxxxxx,  //具体url

                        method:'get/post/put/patch/delete',  //请求方式

                        headers:{token:'xxxxx'等},  //请求头设置

                        params:{},  //请求参数对象，它会将请求参数拼接到url上

                        data:{} //请求参数对象，它会将请求参数放到请求体中

                        }

                 config应用场景

                                1、全局配置

                                        axios.defaults.timeout = 1000

                                        axios.defaults.baseURL = 'http://XXXXX'

                                2、实例配置

                                        在axios创建实例中配置

                                        let instance = axios.create();

                                        instance.defaults.timeout = 1000

                                3、请求配置

                                        在请求中配置

                                        axios.get(url,config).then(res=>{数据处理逻辑}).catch(err=>{错误处理逻辑})

                        其中，配置优先级为：3>2>1

六、axios拦截器

                什么是拦截器？拦截器就是在请求之前和响应之后能进行一些额外操作的功能实现。一般分为请求拦截器和响应拦截器两种。

                请求拦截器

                        请求拦截器顾名思义就是在请求之前进行拦截并进行一些额外操作。    

                                service.interceptors.request.use(

                                    config => {

                                        //在发送请求前的额外处理

                                        return config

                                        },

                                            

                                )

                响应拦截器

                        响应拦截器顾名思义就是在响应之后进行拦截并进行一些额外操作。                    

                                service.interceptors.response.use(

                                            res => {

                                                        //响应之后做一些额外操作

                                                    return res

                                            },

                                            error => {

                                                //在发生错误后的额外处理

                                                return Promise.reject(error)

                                            }

                                        )

                注意：不管是请求拦截器还是响应拦截器，在发生错误后都会进入到请求的catch方法中，如：

                axios.get(url,config).then(res=>{数据处理逻辑}).catch(err=>{错误处理逻辑})

                例子：发送请求前，在请求头中添加token，就可以用拦截器来实现

                        let instance = axios.create(config);

                        instance.interceptors.request.use(

                                confit=>{

                                    config.headers.token="sssssss"

                                    return config

                                },                           

                                error => {

                                       //在发生错误后的额外处理

                                        return Promise.reject(error)

                                 }

                        )

                取消拦截器

                        顾名思义就是取消掉已经配置的拦截器，实际用的不多，了解即可

                        例子：                  

                        let instance = axios.create(config);

                        instance.interceptors.request.use(

                                confit=>{

                                    config.headers.token="sssssss"

                                    return config

                                },                           

                                error => {

                                       //在发生错误后的额外处理

                                        return Promise.reject(error)

                                 }

                        )

                        //取消拦截器操作：

                        axios.interceptors.request.eject(instance)

七、取消请求

                取消请求实际中用的到不多，主要使用场景比如：用户正在批量查询一个比较耗时的数据，发起请求后用户不想查了，这时候就可以取消这个请求

                主要用到：axios.CancelToken.source()方法

                例子：

                axios.CancelToken.source()

                axios.get(url,{CancelToken:source,token}).then(res=>{数据处理逻辑}).catch(err=>{错误处理逻辑})

                //触发取消请求：

                source.cancel('错误信息')

                    就可以了