Vue全家桶实践（三）---axios

最近公司要重写运营管理系统，不想再维护之前的backbone了，赶紧要求前端整个重写。重开新坑，用了两周多撸出了第一版，收获很大。在实践中学习永远都是最高效的。趁热把学到的东西都记录总结下来，也算前端梳理一下思路。

Axios

参考资料：文档

vue团队本来有自己的vue-resource，后来感觉跟vue关系不大就不再维护也不再推荐了。官方推荐使用比较主流的Axios插件。所以我后来也把vue-resource替换成了Axios，确实强大许多。
其实它的用法跟大多数ajax差不多，简单看看很容易就明白了，我这里只记录一些值得记录的点。

执行多个并发请求

function getUserAccount() {
  return axios.get('/user/12345')
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions')
}

axios.all([getUserAccount(), getUserPermissions()])
 .then(axios.spread((acct, perms) => {
   // 两个请求现在都执行完成
 }))

拦截器的使用

拦截器是Axios超好用的一个功能，在ajax发送request之前和接收到response之后分别有一个拦截器，灵活使用他们可以方便很多。可以直接按下边的方法使用：

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
 // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

常见的用途有：1. ajax模拟表单（自定义form这个method，然后配合qs包）；2. 根据本地和开发环境的区别，给ajax的url加上不同的前缀。，例如：

// main.js
// 引入
import Vue from 'vue'
import axios from 'axios'
import qs from 'qs'
// 当前代码执行在哪个环境中？ 开发环境还是生产环境
Vue.config.productionTip = process.env.NODE_ENV === 'production'
// 使用axios来发ajax
// 增加一个拦截器，当method为form时，使用表单提交的方式
// 使用qs包将data转为表单数据
axios.interceptors.request.use((config) => {
  if (config.method === 'form') {
    config.method = 'post'
    config.data = qs.stringify(config.data)
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
  }
  // 若在本地开发环境，则给url增加 '/api' 后缀
  if (!Vue.config.productionTip) {
    config.url = '/api' + config.url
  }
  return config
}, (error) => {
  return Promise.reject(error)
})
// 挂载在Vue原型上
Vue.prototype.$http = axios

文件下载（导出）

有时需要导出的功能，比如传给后端一些查询参数，后端返回一个excel文件下载下来，此时只要改变responseType即可：

this.$http({
  method: 'post',
  url: url,
  data: postData,
  responseType: 'blob'
}).then((res) => {
  if (res.data) {
    let blob = res.data
    let a = document.createElement('a')
    let url = window.URL.createObjectURL(blob)
    let filename = '文件名.xls'
    a.href = url
    a.download = filename
    a.click()
    window.URL.revokeObjectURL(url)
  }
}).catch((rej) => {
  this.tableLoading = false
  this.btnLoading = false
  alert('服务器错误！')
})

Vue全家桶实践（三）---axios

Axios

猜你喜欢