vue.js 二次封装axios + 实现令牌刷新

---

前言

为什么要封装

• 封装的作用：代码具有可重用性和更好的维护性
• 一个api的可能在其它的地方多次被调用，通过封装减少代码量，达到更好的维护效果

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、封装axios

1：npm安装axios至当前项目中，如下

npm install axios --save 

2：新建文件夹api，在里面创建js文件，如下图

3：再创建util文件，在里面再创建Http.js文件，如下图

4：再Http.js文件里引入 如下代码

import axios from 'axios';

5：创建axios实例 封装axios

const instance = axios.create({
    baseURL: 'http://192.168.1.84:8081/m.api', //url
    timeout: 5000,//请求超时
});

6：在api里的js文件里 引入Http.js文件

import Http from '@/util/Http.js';

const Goods = {
    // 列表
    goodslist:(data)=>{
        return Http({
            method:'get',  //方法
            params:{  //参数
                _gp : 'admin.category',
                _mt : 'queryCategory',
                ...data
            }
        })
    }
}

export default Goods 

7：在需要使用的页面中 写入如下代码

import {Goods} from '@/api/goods/Goodscate.js';

goodslist(){
      let list = {  //参数 
        id: this.id,
      }
      Goods.goodslist(list).then((res)=> {
        if(res.data.errmsg == '成功'){
          console.log(res)
        }
      }).catch(function (error) {
        console.log(error);
      });
    }

以上是简单的封装axios

二、实现令牌刷新效果

响应拦截

• 在返回结果前，可以根据需要对结果进一步处理，重新返回新的结果
• 拦截器返回的结果也是一个Promise对象

async和await

• async 表示函数内部有异步操作
• await等待异步返回结果
• 两者结合是更好的让异步执行的结果，可以通过同步化的编程方式实现。（简单来说是异步同步化）

令牌刷新的好处

• 让用户有更好的体验

在Http.js中写入 代码如下（完整示例）：

import axios from 'axios';
import Cookies from 'js-cookie';  
import Base from '@/util/Base64'; 
import router from "@/router";
//1.新建axios实例 封装axios
const instance = axios.create({
    baseURL: 'http://192.168.1.84:8081/m.api', //url
    timeout: 5000,//请求超时
});

// 2.拦截器的配置
// 2.1 请求拦截

// 添加请求拦截器  记得return
instance.interceptors.request.use(config => {
    // 在发送请求之前做些什么
    // 给每个请求添加token
    config.headers['AdminToken'] = Cookies.get('token');
    return config;
  }, error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  });


// 2.2 响应拦截 记得return
// 添加响应拦截器---无限刷新令牌，无痛刷新，令牌刷新
instance.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  // 1.获取到登录的账户和密码
  // 2.重新登录
  // 3.把重新登录之后的token重新赋值给请求头（使用aysnc---await）
  let errno = response.data.errno  //拿到响应数据
  if( errno == 10001 || errno == 10006){ 
    let form = eval("("+ Base.decode(Cookies.get("from")) +")")//获取存储导cookies中的内容
    if(form.rempassword === true){  //如果是记住密码重新刷新令牌
      return login(response) //调用函数刷新令牌
    }else{   //否则跳回到登录页面
      router.replace('/')
    }
  }
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

async function login(response){
  let form = eval("("+ Base.decode(Cookies.get("from")) +")")
  let res = await instance({
    method:'get',
    params:{
      _gp : 'admin',
      _mt : 'login',
      username : form.user,
      password : form.checkPass,
      verifyCode : '666666'
    }
  })
  if(res.data.errmsg == '成功'){
    let expires = new Date(new Date() * 1 + 1200* 1000);//设置时间 20min
    Cookies.set("token", res.data.data, { expires: expires });//重新存储token
    response.config.headers['AdminToken'] = res.data.data; //重新给请求头添加token
    return await axios(response.config) //重新请求axios
  }
}

// 导出
export default instance

---