VUE中获取数据方式（axios）详细介绍

众所周知，我们现在大多采用前后端分离的模式来开发项目，前端项目个人采用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('错误信息')

就可以了