【Vue实战教程】之Vue项目中的异步请求

Vue的异步请求

1 axios的安装与使用

Axios是一个基于promise的HTTP库，主要用来向服务端发起请求，可以在请求中做更多可控的操作，例如拦截请求等。

Axios可以使用在浏览器和node.js中，Vue、React等前端框架的广泛普及，促使了axios这种轻量级库的出现。

Axios的特性：

可以在浏览器中发送 XMLHttpRequests
可以在 node.js 发送 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
能够取消请求
自动转换 JSON 数据
客户端支持保护安全免受 XSRF 攻击

1.1 安装axios

安装命令如下：

ssh 复制代码

npm install axios --save

打开使用vue脚手架创建的项目，在main.js文件中引入axios模块，代码如下：

javascript 复制代码

import axios from 'axios';
Vue.prototype.$axios = axios;

在组件中使用axios发送异步请求，代码如下：

html 复制代码

<script>
export default {
mounted(){
this.$axios.get('/user?id=123').then(res=>{
console.log(res.data);
})
}
}
</script>

1.2 axios基本用法

Axios主要的作用是向服务端发起HTTP请求，根据 HTTP 标准，HTTP 请求可以使用多种请求方法。

为了在开发中能够更方便的使用axios，为所有支持的请求方法提供了别名。

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

注意在使用别名方法时， url、method、data 这些属性都不必在配置中指定。

GET请求

GET请求用于获取数据，从指定的资源请求数据，并返回实体主体。代码如下：

javascript 复制代码

// 方法一
this.$axios.get('/url',{
params: {
id:1
}
}).then(res=>{
console.log(res.data);
},err=>{
console.log(err);
})

// 方法二
this.$axios({
method: 'get',
url: '/url',
params: {
id:1
}
}).then(res=>{
console.log(res.data);
},err=>{
console.log(err);
})

POST请求

POST请求是向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。

POST请求一般分为两种类型：

form-data 表单提交，图片上传、文件上传时用该类型比较多
application/json 一般是用于 ajax 异步请求

代码如下：

javascript 复制代码

this.$axios.post('/url',{
id:1
}).then(res=>{
console.log(res.data);
},err=>{
console.log(err);
})

PUT请求

PUT请求用于更新数据，从客户端向服务器传送的数据取代指定的文档的内容。代码如下：

javascript 复制代码

this.$axios.put('/url',{
id:1
}).then(res=>{
console.log(res.data);
})

PATCH请求

PATCH请求也是用于更新数据，是对put方法的补充，用来对已知资源进行局部更新。代码如下：

javascript 复制代码

//patch请求
this.$axios.patch('/url',{
id:1
}).then(res=>{
console.log(res.data);
})

DELETE请求

DELETE是请求服务器删除指定的页面。使用axios发送DELETE请求，参数可以使用明文的方式或者是封装为对象进行提交。代码如下：

javascript 复制代码

// 参数以明文方式提交
this.$axios.delete('/url',{
params: {
id:1
}
}).then(res=>{
console.log(res.data);
})

// 参数以封装对象方式提交
this.$axios.delete('/url',{
data: {
id:1
}
}).then(res=>{
console.log(res.data);
})

2 axios实例

当axios要请求多个不同的后端接口地址，并且一些axios配置项都相同时，可以先创建axios实例，然后使用axios实例发起请求。

可以使用自定义配置新建一个 axios 实例。代码如下：

javascript 复制代码

let instance = this.$axios.create({
baseURL: 'http://localhost:9090',
timeout: 2000
});
			
instance.get('/query').then(res=>{
console.log(res.data);
});

在一个Vue组件中可以同时创建多个axios实例。

Axios实例常用配置：

baseURL 请求的域名基本地址，类型：String；
timeout 请求超时时长，单位ms，类型：Number；
url 请求路径，类型：String；
method 请求方法，类型：String；
headers 设置请求头，类型：Object；
params 请求参数，将参数拼接在URL上，类型：Object；
data 请求参数，将参数放到请求体中，类型：Object；

axios全局配置

代码如下：

javascript 复制代码

//配置全局的超时时长
this.$axios.defaults.timeout = 2000;

//配置全局的基本URL
this.$axios.defaults.baseURL = 'http://localhost:8080';

axios实例配置

代码如下：

javascript 复制代码

let instance = this.$axios.create();
instance.defaults.timeout = 3000;

axios请求配置

代码如下：

javascript 复制代码

this.$axios.get('/query',{
timeout: 3000
}).then();

以上配置的优先级为：请求配置 > 实例配置 > 全局配置。

3 axios并发请求

Axios提供了并发请求的方法，可以同时进行多个请求，并统一处理返回值。代码如下：

javascript 复制代码

this.$axios.all([
this.$axios.get('/query/classify'),
this.$axios.get('/query/goods')
]).then(
this.$axios.spread((classifyRes,goodsRes)=>{
console.log(classifyRes.data);
console.log(goodsRes.data);
})
)

4 axios拦截器

Axios提供了拦截器的功能，使用拦截器可以提高请求的可控性，并且完成更多复杂的操作。Axios的拦截器分为请求拦截器和响应拦截器，两种拦截器在不同的时机对axios发起的请求进行处理。

请求拦截器

在请求被 then 或 catch 处理前拦截它们。代码如下：

javascript 复制代码

this.$axios.interceptors.request.use(config=>{
// 发生请求前的处理
return config;
},err=>{
// 请求错误处理
return Promise.reject(err);
});

//或者用axios实例创建拦截器
let instance = $axios.create();
instance.interceptors.request.use(config=>{
return config
});

响应拦截器

在响应被 then 或 catch 处理前拦截它们。代码如下：

javascript 复制代码

this.$axios.interceptors.response.use(res=>{
//请求成功对响应数据做处理
//该返回对象会传到请求方法的响应对象中
return res 
},err=>{
// 响应错误处理
return Promise.reject(err);
});

取消拦截

如果你想在稍后移除拦截器，可以设置取消拦截，代码如下：

javascript 复制代码

let instance = this.$axios.interceptors.request.use(config=>{/*...*/});

//取消拦截
this.$axios.interceptors.request.eject(instance);

5 axios错误处理

Axios请求拦截器和响应拦截器抛出错误时，返回的err对象会传给catch()函数的err对象参数。代码如下：

javascript 复制代码

this.$axios.get('/url').then(res=>{
    // 获取响应数据
}).catch(err=>{
// 错误处理
console.log(err);
});

6 axios取消请求处理

axios取消请求主要用于取消正在进行的http请求。代码如下：

javascript 复制代码

let source = this.$axios.CancelToken.source();

this.$axios.get('/goods.json',{
cancelToken: source.token
}).then(res=>{
console.log(res)
}).catch(err=>{
//取消请求后会执行该方法
console.log(err)
});

//取消请求，参数可选，该参数信息会发送到请求的catch中
source.cancel('取消后的信息');