关于axios的一些封装

关于Axios的封装

为何需要在封装

应用场景，项目中涉及100个AJAX请求，其中：

1.其中60个需要在请求头header设置token headers: {token: token}用于权限校验;

2.其中20个为上传EXCEL文件需要在请求头中设置Content-Type;

headers: {
        'Content-Type': `multipart/form-data; boundary=${data._boundary}`
}

上面说的 1、2、3可以在全局request拦截中进行处理，但是代价极大，需要为这100个接口都做判断再做相应处理... ；当然也可以不用全局拦截，为每个接口都单独定义，我相信有不少同学仍是这样处理的，但是只要有改动，例如现在我要求所有的请求头都新增一个参数，那就只能一个一个接口的改.....这不是我们想要的结果，所以 我们需要对AJAX再封装！AJAX再封装！AJAX再封装！，因为相当重要，所以要多说几遍....

3. ③最后20个请求用来获取文件流，需要指定接受类型responseType: 'blob'

4. 需要对全局发起request进行拦截并做异步处理（强调：是异步处理）；

5. 如果你的项目已经做到一半，现在后端要加上token权限做认证；

封装实现

封装其实很简单，就是对原来真正的AJAX套一个壳，这个壳就是一个函数！ 在这个函数里都干了些什么见不得人事呢？干什么都可以，上面说的1、 2、 3、 4、 5都可以在这里悄悄的进行，那对原来的AJAX链式调用有影响吗？答案是肯定的：没有影响。 先来看看我在代码里调用的AJAX：

_initEditParams () {
    this.$axios('Common/Permission/Get', {Id}).then(res => {
    ....
    ....
    })
},

this.$axios可以直接调用是因为这里把请求方法之类的配置项全放在封装里面进行了。

这里也是通过Vue.prototype.$axios = axios添加到vue全局实例的，但这里添加的axios不是直接引入的axios插件，而是一个方法

import {axios} from './utils/common'
Vue.prototype.$axios = axios

当然。也可以不用添加到全局实例里面，可以在组件中通过import语法引入使用。当然是项目里大量使用的封装方法直接使用Vue.prototype添加到vue实例。接下来我们看看axios方法都做了些啥：

import Axios from 'axios'
import Store from '../vuex'
​
/*********************************
 ** Fn: axios
 ** Intro: 公用封装的axios 已在main.js中进行 $axios代理
 ** Intro: Store.state.permission.constUrl 为公用的接口前缀地址
 ** Intro: url 方法接受参数 为定义的 接口地址后缀
 ** Intro: data 方法接受参数 为定义的参数
 ** Author: zyx
*********************************/
​
export function axios (url, data) {
 return new Promise((resolve, reject) => {
   Axios({
     url: `${Store.state.permission.constUrl}${url}`,
     method: 'post',
     data: data,
     headers: {
       token: Store.state.permission.token
     }
   }).then(res => {
     resolve(res)
   }).catch(err => {
     reject(err)
   })
 })
}

Axios的封装

在目录下新建一个Axios文件夹，在文件夹下新建文件axios.js，文件内容：

import Axios from "axios";
import qs from "qs";
import router from "@/router/router.js";
// import { Message } from "element-ui";
​
/****** 创建axios实例 ******/
const Service = Axios.create({
  baseURL: process.env.BASE_URL, // api的base_url
  timeout: 10000, // 请求超时时间
  responseType: "json",
  withCredentials: true, // 是否允许带cookie这些
  headers: {
    //   "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
    "Content-Type": "application/json;charset=utf-8"
 }
});
​
// 设置请求拦截器
Service.interceptors.request.use(config => {
    // 在发送请求之前做某件事
    if (config.method === "post") {
      // 序列化
      // config.data = qs.stringify(config.data);
      // config.data = JSON.stringify(config.data);
      // 温馨提示,若是公司的提交能直接接受json 格式,可以不用 qs 来序列化的
   }
    // 若是有做鉴权token , 就给头部带上token
    // 若是需要跨站点,存放到 cookie 会好一点,限制也没那么多,有些浏览环境限制了 localstorage 的使用
    // if (localStorage.token) {
    //   config.headers.Authorization = localStorage.token;
    // }
    return config;
 },
  error => {
    // error 的回调信息,看公司的定义
    Message({
      showClose: true,
      message: error,
      type: "warning"
   });
    return Promise.reject(error);
})
​
// 响应拦截 http 请求回来的一些状态码，包括我们自己的服务器返回的错误码进行一个逻辑处理。
Service.interceptors.response.use(res => {
  
  //对响应数据做些事
  // if (res.data && !res.data.success) {
  //     Message({
  //         // 饿了么的消息弹窗组件,类似toast
  //         showClose: true,
  //         message: res.data.error.message.message ?
  //         res.data.error.message.message :
  //         res.data.error.message,
  //         type: "error"
  //     });
  //     return Promise.reject(res.data.error.message);
  // }
  return res;
}, (error) => {
​
  // 错误处理方式1：
//   if (error.data) {
//     switch (error.data.code) {
//       case 401:
//         // 返回 401 清除token信息并跳转到登录页面
//         // store.commit("del_token");
//         router.push({
//           path: "/login",
//           //   记录原来的页面路径用于登录后调回原页面
//           query: {
//             redirect: router.currentRoute.fullPath
//           }
//         });
//         break;
//     }
//   }
​
​
  // 错误处理方式2：
  // 用户登录的时候会拿到一个基础信息,比如用户名,token,过期时间戳
  // 直接丢localStorage或者sessionStorage
  if (!window.localStorage.getItem("username")) {
    // 若是接口访问的时候没有发现有鉴权的基础信息,直接返回登录页
    router.push({
      path: "/login"
   });
 } else {
      // 下面是接口回调的satus ,因为我做了一些错误页面,所以都会指向对应的报错页面
      if (error.response.status === 403) {
        router.push({
          path: "/error/403"
       });
     }
      if (error.response.status === 500) {
        router.push({
          path: "/error/500"
       });
     }
      if (error.response.status === 502) {
        router.push({
          path: "/error/502"
       });
     }
      if (error.response.status === 404) {
        router.push({
          path: "/error/404"
       });
     }
    
 }
  // 返回 response 里的错误信息
  let errorInfo = error.data.error ? error.data.error.message : error.data;
  return Promise.reject(errorInfo);
​
})
//封装后导出
export default Service;
​

这种方法使用方式有两种：

使用方式1：

1：全局配置：在main.js文件里导入封装的axios文件

import axios from '@/Axios/axios';

2：绑定到Vue实例

Vue.prototype.$axios= axios; //在其他vue组件中就可以this.axios调用使用:

3：在需要使用的单文件VUE组件里面直接使用(因为是全局配置，在使用的单文件里面不需要引入)

this.$axios.get(url,{params:{ID:888}}).then(res=>{}).catch(error=>{})
this.$axios.post(url,{id:888,name:"sdsdsd"}).then(res=>{}).catch(error=>{})

使用方式2：

在Axios文件夹下（或者其他文件夹）先新建一个api(任意名称)文件：api.js

1：该文件里面下业务接口请求相关的函数：

// 封装后使用的方式
import request from "@/Axios/axios.js"
export function tableList(query){
    return request({
        url: 'http://yapi.demo.qunar.com/mock/27844/apitest/list',
       method: 'get',
       params: query
   })
}
​
export function goodsList(query){
 return request({
     url: 'http://yapi.demo.qunar.com/mock/27844/apitest/list',
     method: 'get',
     params: query
 })
}

2:在需要使用的单文件里面导入需要调用的接口函数

比如:home.vue单文件里面

<template>
    <div class="mainBox">
        <table-component v-if="data.length>0" :goodslist="data"></table-component>
    </div>
</template>
<style rel="stylesheet/scss" lang="scss" scoped></style>
<script>
 // 导入接口函数
import {tableList}  from "../Axios/api.js" ;
import tableComponent from "@/view/table/table";
export default {
    data() {
       return {
            data:[]
       }
   },
    mounted() {
        this.getData()
   },
    methods:{
        getData(){
            //使用接口函数
            tableList().then(res=>{
                console.log(res.data);
                this.data = res.data.list
           })
       }
   },
    components: {
        tableComponent
   },
}
</script>