Vue全家桶实践(三)---axios

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

相关博客:

  1. Vue全家桶实践(一)—vue-cli
  2. Vue全家桶实践(二)—iView
  3. Vue全家桶实践(三)—axios
  4. Vue全家桶实践(四)—vue-router
  5. Vue全家桶实践(五)—渲染函数&JSX
  6. Vue全家桶实践(六)—自定义指令(directive)

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('服务器错误!')
})
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页