一、axios是什么

  axios 是一个轻量的 HTTP客户端。

  基于 XMLHttpRequest 服务来执行 HTTP 申请，反对丰盛的配置，反对 Promise，反对浏览器端和 Node.js 端。自Vue2.0起，尤大发表勾销对 vue-resource 的官网举荐，转而举荐 axios。当初 axios 曾经成为大部分 Vue 开发者的首选。

个性

  • 从浏览器中创立 XMLHttpRequests
  • 从 node.js 创立 http 申请
  • 反对 Promise API
  • 拦挡申请和响应
  • 转换申请数据和响应数据
  • 勾销申请
  • 主动转换 JSON 数据
  • 客户端反对进攻 XSRF

二、axios的二次封装

  axios 的 API 很敌对，能够很轻松地在我的项目中间接应用。不过随着我的项目规模增大，如果每发动一次HTTP申请，就要把这些比方设置超时工夫、设置申请头、依据我的项目环境判断应用哪个申请地址、错误处理等等操作，都须要写一遍。这种重复劳动不仅浪费时间，而且让代码变得冗余不堪，难以保护。为了进步代码品质，咱们应该在我的项目中二次封装一下 axios 再应用。

1.如何封装

封装的同时，你须要和后端协商好一些约定，申请头，状态码，申请超时工夫.......

  • 设置接口申请前缀：依据开发、测试、生产环境的不同，前缀须要加以辨别
  • 申请头 : 来实现一些具体的业务，必须携带一些参数才能够申请(例如：会员业务)
  • 状态码: 依据接口返回的不同status ， 来执行不同的业务，这块须要和后端约定好
  • 申请办法：依据get、post等办法进行一个再次封装，应用起来更为不便
  • 申请拦截器: 依据申请的申请头设定，来决定哪些申请能够拜访
  • 响应拦截器： 这块就是依据 后端返回来的状态码断定执行不同业务

axios的罕用根本配置项为：

axios({  method: 'get', // post、get、put、delete....  baseURL: '', // 申请的域名，根本地址，公共的门路  url: '', // 申请的门路  params: {}, // get参数会将申请参数拼接在url上  data: {}, // post会将申请参数放在申请体中  headers: {}, // 设置申请头，例如设置token等  timeout: 1000, // 设置申请超时时长，单位：ms  withCredentials：default,//表明了是否是跨域申请、默认是default  maxContentLength：1000//相应内容的最大值})

在我的项目中，我是这样二次封装的：

1.在axios.js文件内设置好根底的配置项：

import Vue from "vue";import axios from "axios";axios.defaults.timeout = 100000;axios.defaults.withCredentials = true;Vue.prototype.$axios = axios;//把axios挂载到vue的原型上供全局调用。

2.如果有生产环境的辨别，则能够通过判断node环境变量确定链接申请地址的baseURL：

if (process.env.NODE_ENV === 'development') {  axios.defaults.baseURL = 'http://dev.xxx.com'} else if (process.env.NODE_ENV === 'production') {  axios.defaults.baseURL = 'http://prod.xxx.com'}

3.而后，须要增加申请拦截器和响应拦截器：

a.申请拦截器能够在每个申请里加上token，或者增加一些其余默认须要发送给后端的根底信息。

以下是申请拦截器的简略用法示例：

// 申请拦截器axios.interceptors.request.use(  config => {    // 每次发送申请之前判断是否存在token    // 如果存在，则对立在http申请的header都加上token，这样后盾依据token判断你的登录状况，此处token个别是用户实现登录后贮存到localstorage里的，上面的代码只是一个简略示意    token && (config.headers.Authorization = token)    return config  },  error => {    return Promise.error(error)  })

  进阶的做法，就是存储每次发送的申请，拦挡勾销之前曾经发送然而还没收到后端回应的雷同申请，或者router（路由）跳转前清除掉上一个router里暂未收到后端回应的申请。
  说到这个问题，就须要讲到axios中cancelToken这个API，该API能够获取到以后申请造成勾销对应申请的函数，调用后即勾销该申请。

对应的代码如下所示：

const CancelToken = axios.CancelToken;import store from 'store.js'Vue.$pending = {}axios.interceptors.request.use((config) => {  let key = config.url + '&' + config.method;//通过对应字段组成可惟一确定勾销申请函数的key  removePending(key, true)//删除雷同的申请  //  config.cancelToken = new CancelToken(cancelFun => { // cancelFun => 勾销函数的形参 实际上对应的是这个勾销函数    // 一个申请的勾销函数 对应着一次申请    // 执行勾销函数 能力勾销本次申请 存储本次申请对应的勾销函数 保障每次申请是惟一的 这样能力判断是否存在反复申请    Vue.$pending[key] = cancelFun  })  // 增加一些默认的参数，具体视我的项目决定  addDefaultParams(config.headers, store)  return config})addDefaultParams(obj, store){    // 增加一些默认的参数，具体视我的项目决定}function removePending(key, isRequest = false) {  if (Vue.$pending[key]) {    // 当上一次申请未响应式 再一次发送申请时 会把上一次申请中断掉 并把本次自定义错误信息 放入reject(err)中    Vue.$pending[key]()//勾销反复的申请，不须要函数参数    delete Vue.$pending[key]//被勾销申请后，删除掉该勾销函数  }}

b.响应拦截器能够在接管到响应后先做一层操作，如依据状态码判断登录状态是否须要返回登录页面、受权。

axios.interceptors.response.use(response => {  // 如果返回的状态码为200，阐明接口申请胜利，能够失常拿到数据  // 否则的话抛出谬误  if (response.status === 200) {    if (response.data.code === 511) {      // 未受权调取受权接口    } else if (response.data.code === 510) {      // 未登录跳转登录页    } else {      return Promise.resolve(response)    }  } else {    return Promise.reject(response)  }}, error => {  // 咱们能够在这里对异样状态作对立解决  if (error.response.status) {    // 解决申请失败的状况    // 对不同返回码对相应解决    return Promise.reject(error.response)  }})

我的项目里的响应拦截器代码如下：

axios.interceptors.response.use((response) => {  let key = response.config.url + '&' + response.config.method  removePending函数(key)//删除雷同的申请  if (!response) {    return false;  }  if (response.request.responseType === 'blob') {    return response  }  return response.data;},  (content) => {    if(content?.response?.status==="401"){      checkToken();    }    return Promise.reject(content);  });function checkToken(){      //查看localStorage内是否有tokenId，若没有，则store设置为logout，路由跳转到登录界面  if(!localStorage.getItem("tokenId")){    store.dispatch('logout');    router.push({name: "login"});  }  else{    //若localStorage内有tokenId，则登录状态过期，函数内代码性能可为弹出从新登录小窗口    debounceUnauthorized();  }}

  当须要实现路由跳转前勾销反复申请，则在main.js文件，即router文件，在其beforeEach钩子函数内写入removePending函数来删除申请。

router.beforeEach((to, from, next) => {  for(let key in Vue.$pending){    Vue.$pending[key]();//顺次删除pending申请  }  Vue.$pending = {};  ..........这上面是你的路由验证代码..........})

  以上是axios的根本配置，接着，对于我的项目里每一个包或者模块，都会有本人的axios申请汇合的js文件。通过上一步把axios挂载到vue上，其余js文件能够通过this.$axios来调用axios插件。举个例子如下：

//demo.jsexport default{  createPo: (param) => {    return $axios.$post('url', {param});  },  ..........文件..........}

  像下面的文件，每隔包或者模块都会有一个对应的文件来存储，能够将他们搁置在同一个文件夹内，不便获取。比如说，所有的申请文件都放在同级的modules文件夹，那获取相干的内容，能够通过以下形式：

import Vue from "vue";const modulesFiles = require.context("./modules", true, /\.js$/);const modules = {};modulesFiles.keys().map((key) => {  const keys = key.replace(/(\.\/|\.js)/g, "");  modules[keys.split("/").pop()] = modulesFiles(key).default;});Vue.prototype.$api = modules;export default {  modules}

通过以上的设置，在其余vue文件内就能够通过this.$api.$demo.createPo间接调用申请函数了。
至此，axios的二次封装根本完结（后续有什么其余设置再来补充）

三、axios的调用形式备忘