Vue中使用axios的一些注意点

• 现在我们的团队使用的基本都是axios发起请求&＃xff0c;使用方式如下
• 在service.js文件中返回promise对象

import config from &＃39;&＃64;/config&＃39;
import axios from &＃39;axios&＃39;
export default{/*启用停用*/setB2bStoreGoodsBlackUpOrDown(data) {return new Promise(function (resolve, reject) {const url &＃61; &＃96;${config.server.http}${config.server.host}/b2b-seller-admin/setStoreGoodsBlackUpOrDown&＃96;axios.post(url, data).then(function (data) {resolve(data)}).catch(function (error) {reject(error)})})},/*一个接口查黑名单*/getListB2bCanaleStoreGoodsBlacks(data) {return new Promise(function (resolve, reject) {const url &＃61; &＃96;${config.server.http}${config.server.host}/b2b-seller-admin/page/getListCanaleStoreGoodsBlacks&＃96;axios.post(url, data).then(function (data) {resolve(data)}).catch(function (error) {reject(error)})})},
}


• 在组件中调用方法&＃xff0c;使用async await语句&＃xff0c;外层加try catch 捕获异常

import advService from &＃39;&＃64;B2B/services/substatAdmin/advService.js&＃39;
import scrollMixins from &＃39;&＃64;/mixins/scrollMixins.js&＃39;
import config from &＃39;&＃64;/config&＃39;
import storage from &＃39;&＃64;/utils/storage.js&＃39;export default {mixins: [scrollMixins],data() {return {con1:false,con10:false,locationoptions: [],B2bAdv: {siteid: null,sort: 0,picUrl: "",openTpye: 0}}},methods: {async saveAdv(){let flag &＃61; this.Formrule()if (flag) {try {this.B2bAdv.startTime &＃61; this.B2bAdv.timevalue[0].getTime().toString().substr(0, 13)this.B2bAdv.endTime &＃61; this.B2bAdv.timevalue[1].getTime().toString().substr(0, 13)const data &＃61; await advService.addB2bAdv(this.B2bAdv)if (data.status &＃61;&＃61; 200 && data.data.result) {this.closeTab()} else {console.log(data.status.statusReason)this.$customMessage("新增失败", "error")}}catch (e) {this.$customMessage("新增失败", "error")console.log(e)}}}}
}
2. 自定义请求头

• 在开发过程中&＃xff0c;我们所有的请求现在都要走网关&＃xff0c;而且网关需要传递userId和token做鉴权&＃xff0c;如果在每个请求中都要写&＃xff0c;那么会很麻烦&＃xff0c;这个时候我们需要使用axios的拦截器
• 创建如图所示的文件夹结构

• 代码实现

/** 在main.js的入口文件引入request.js* *//***全局配置配置***/
// axios请求配置
import &＃39;&＃64;/utils/request/request.js&＃39;


/** request.js* *//** &＃64;Author: 石国庆* &＃64;Desc: 所有axios的拦截器&＃xff0c;默认配置都可以写在这里* &＃64;Date: 2017.11.14* */import config from &＃39;&＃64;/config/index.js&＃39;
// 开关控制
if (config.setting.customHttpHeader) {// 这里面没法用import// 添加用户id的请求头require(&＃39;&＃64;/utils/request/header.js&＃39;)// import &＃39;&＃64;/utils/request/header.js&＃39;
}


/** header.js* *//** &＃64;Author: 石国庆* &＃64;Desc: axios的请求头&＃xff0c;用于添加网关需要的userId和token自定义请求头* &＃64;Date: 2017.11.14* */
import globalConfig from &＃39;&＃64;/config/index.js&＃39;
import storage from &＃39;&＃64;/utils/storage.js&＃39;
import axios from &＃39;axios&＃39;// 这点的重点就是不能写死&＃xff0c;还要把这个方法导出去&＃xff0c;因为还要兼容用ajax写的老代码
let func &＃61; function (config) {// 开关控制if (globalConfig.setting.permission) {if (storage.getItem(&＃39;SGQ.global.userAuthor&＃39;) !&＃61; null) {// 这里的config包含每次请求的内容config.headers.userId &＃61; storage.getItem(&＃39;SGQ.global.userAuthor&＃39;).idconfig.headers.token &＃61; storage.getItem(&＃39;SGQ.global.userAuthor&＃39;).tokenconfig.headers.userName &＃61; storage.getItem(&＃39;SGQ.global.userAuthor&＃39;).userNameconfig.headers.orgId &＃61; storage.getItem(&＃39;SGQ.global.userAuthor&＃39;).orgId}} else {// 这里的config包含每次请求的内容config.headers.userId &＃61; &＃39;2167676703289898&＃39;config.headers.token &＃61; &＃39;eyJhbGciOiJIUzUxMiJ9.eyJrtrtriOiIyMTYwMDMyIiwiaWF0IjoxNTA5MTYwOTIzfQ.Gz6eKAkimLg7777777777777777777777777ZZF2KiX01ux7OVphfGmUT6o9q-n5eJxN0RA99evCHpfyR78gbVg&＃39;config.headers.userName &＃61; &＃39;cj&＃39;config.headers.orgId &＃61; 1}return config
}// 使用请求的拦截器
axios.interceptors.request.use(func, function (err) {return err
})export default func


• 自定义请求头问题
  • 自定义请求头遇到了一个问题&＃xff0c;userId&＃xff0c;token&＃xff0c;这些参数都不是http请求头中默认的属性&＃xff0c;所以浏览器会先向后端服务发起一个option的预请求&＃xff0c;当服务器响应在请求头中可以加这些自定义属性的时候&＃xff0c;浏览器才会发起真实的get或者post数据请求
    • 参考&＃xff1a;http://blog.csdn.net/enter89/article/details/51205752
  • 所以这个时候后端需要把跨域都设置为*,否则会报跨域问题

• 我们可以利用axios的拦截器&＃xff0c;做统一的错误状态码处理
  • 比如401状态码跳转登录页
  • token过期校验等跳转
• 代码实现

/** 新建一个error.js&＃xff0c;然后在request.js文件中引入* *//** &＃64;Author: 石国庆* &＃64;Desc: axios的请求头&＃xff0c;用于添加网关需要的userId和token自定义请求头* &＃64;Date: 2017.11.14* */
import globalConfig from &＃39;&＃64;/config/index.js&＃39;
import storage from &＃39;&＃64;/utils/storage.js&＃39;
import axios from &＃39;axios&＃39;let errFunc&＃61;function (error) {if (error.response) {switch (error.response.status) {case 401:// 返回 401 清除token信息并跳转到登录页面router.replace({path: &＃39;login&＃39;,query: {redirect: router.currentRoute.fullPath}})}}// 返回接口返回的错误信息return error.response.data
}// 使用请求的拦截器
axios.interceptors.response.use(function (response) {return response
},errFunc)export default errFfunc
4. 参考和引用 5. 特别感谢

• 公司的小伙伴

• 本文档中的部分内容摘自网上的众多博客&＃xff0c;仅作为自己知识的补充和整理&＃xff0c;并分享给其他需要的coder&＃xff0c;不会用于商用。
• 因为很多博客的地址看完没有及时做保存&＃xff0c;所以很多不会在这里标明出处&＃xff0c;非常感谢各位大牛的分享&＃xff0c;也希望大家理解。
• 如果原文作者感觉不适&＃xff0c;可以及时联系我shiguoqing999&＃64;163.com,我将及时删除争议部分内容

• 如有大段引用超过全文50%的内容&＃xff0c;请在文档结尾标明原文出处&＃xff1a;龙马行空-石国庆-朱庇特-https://my.oschina.net/u/1416844/blog&＃xff0c;否则将视为抄袭&＃xff0c;予以法律追究&＃xff0c;请各位尊重个人知识产权。