工作中axios的二次封装与要点备忘

一、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：false,//表明了是否是跨域请求、默认是false
  maxContentLength：1000,//相应内容的最大值
  auth:{},//表示应该使用 HTTP 基本身份验证，并提供凭据。这将设置一个 `Authorization` 标头，覆盖您使用 `headers` 设置的任何现有的 `Authorization` 自定义标头。
  responseType: 'json', // 默认值
  // `responseEncoding` 表示用于解码响应的编码（仅限 Node.js）
  // 注意：忽略“stream”或客户端请求的 `responseType`
  responseEncoding: 'utf8', // 默认值
  // `xsrfCookieName` 是用作 xsrf 令牌值的 cookie 的名称
  xsrfCookieName: 'XSRF-TOKEN', // 默认值
  // `xsrfHeaderName` 是携带 xsrf 令牌值的 http 标头的名称
  xsrfHeaderName: 'X-XSRF-TOKEN', // 默认值
  ...
})

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

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.js
export 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的调用方式备忘

1.axios常用语法

• axios(config): 通用/最本质的发任意类型请求的方式。
• axios(url,config): 可以只指定url发送get请求。
• axios.request(config): 等同于axios(config)。
• axios.get(url,config): 发送get请求。
• axios.delete(url,config): 发送delete请求。
• axios.post(url,data,config): 发送post请求。
• axios.put(url,data,config): 发送put请求。
• axios.defaults.xx: 请求的默认全局配置。
• axios.interceptors.request.use(): 添加请求拦截器。
• axios.interceptors.response.use(): 添加响应拦截器。
• axios.create([config]): 创建一个新的axios(它没有下面的5个功能)。
• axios.Cancel(): 创建取消请求的错误对象。
• axios.CancelToken(): 创建取消请求的Token对象。
• axios.iscancel(): 是否是一个取消请求的错误。
• axios.all(promises): 批量执行多个异步请求。
• axios.spread(): 指定接受所有成功数据的回调函数的方法。

注：
  如果存在两个请求响应拦截器，则执行顺序是request2 > request1 > response1 > response2 > data

2.axios语法细节：

⑴.axios.delete只有两个参数url和config，delete请求有两种参数的拼接的方式：

①.请求参数以?的形式拼接在url路径上面：

  axios.delete(url,{
      params:{
          属性：属性值
      }
  })

②.请求参数放在请求体body里面：

  axios.delete(url,{
      data:{
          属性：属性值
      }
  })

注：data 与 params 的区别：
⑴ params：将与请求一起发送的URL参数，常用于'get'请求，必须是一个无格式对象（plain object）或URLSearchParams对象。后端对应采用@RequestParam接收，对应chrome的Query String Parameters。
⑵ data：作为请求主体被发送的数据，只适用于'put'、'post'、'patch'类型的请求，
在没有设置transformRequest时，data类型必须是string、plain object、ArrayBufferView、URLSearchParams之一。后端对应采用@RequestBody接收，对应chrome的Request Payload。

⑵ axios.all 与 axios.spread的合并使用：

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

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

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