阅读量:0
Vue的异步请求
1 axios的安装与使用
Axios是一个基于promise的HTTP库，主要用来向服务端发起请求，可以在请求中做更多可控的操作，例如拦截请求等。
Axios可以使用在浏览器和node.js中，Vue、React等前端框架的广泛普及，促使了axios这种轻量级库的出现。
Axios的特性：
- 可以在浏览器中发送 XMLHttpRequests
- 可以在 node.js 发送 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 能够取消请求
- 自动转换 JSON 数据
- 客户端支持保护安全免受 XSRF 攻击
1.1 安装axios
安装命令如下：
npm install axios --save 打开使用vue脚手架创建的项目，在main.js文件中引入axios模块，代码如下：
import axios from 'axios’; Vue.prototype.$axios = axios; 在组件中使用axios发送异步请求，代码如下：
<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请求用于获取数据，从指定的资源请求数据，并返回实体主体。代码如下：
// 方法一 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 异步请求
代码如下：
this.$axios.post('/url',{ id:1 }).then(res=>{ console.log(res.data); },err=>{ console.log(err); }) PUT请求
PUT请求用于更新数据，从客户端向服务器传送的数据取代指定的文档的内容。代码如下：
this.$axios.put('/url',{ id:1 }).then(res=>{ console.log(res.data); }) PATCH请求
PATCH请求也是用于更新数据，是对put方法的补充，用来对已知资源进行局部更新。代码如下：
//patch请求 this.$axios.patch('/url',{ id:1 }).then(res=>{ console.log(res.data); }) DELETE请求
DELETE是请求服务器删除指定的页面。使用axios发送DELETE请求，参数可以使用明文的方式或者是封装为对象进行提交。代码如下：
// 参数以明文方式提交 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 实例。代码如下：
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全局配置
代码如下：
//配置全局的超时时长 this.$axios.defaults.timeout = 2000; //配置全局的基本URL this.$axios.defaults.baseURL = 'http://localhost:8080'; axios实例配置
代码如下：
let instance = this.$axios.create(); instance.defaults.timeout = 3000; axios请求配置
代码如下：
this.$axios.get('/query',{ timeout: 3000 }).then(); 以上配置的优先级为：请求配置 > 实例配置 > 全局配置。
3 axios并发请求
Axios提供了并发请求的方法，可以同时进行多个请求，并统一处理返回值。代码如下：
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 处理前拦截它们。代码如下：
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 处理前拦截它们。代码如下：
this.$axios.interceptors.response.use(res=>{ //请求成功对响应数据做处理 //该返回对象会传到请求方法的响应对象中 return res },err=>{ // 响应错误处理 return Promise.reject(err); }); 取消拦截
如果你想在稍后移除拦截器，可以设置取消拦截，代码如下：
let instance = this.$axios.interceptors.request.use(config=>{/*...*/}); //取消拦截 this.$axios.interceptors.request.eject(instance); 5 axios错误处理
Axios请求拦截器和响应拦截器抛出错误时，返回的err对象会传给catch()函数的err对象参数。代码如下：
this.$axios.get('/url').then(res=>{ // 获取响应数据 }).catch(err=>{ // 错误处理 console.log(err); }); 6 axios取消请求处理
axios取消请求主要用于取消正在进行的http请求。代码如下：
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('取消后的信息'); 