Vue 2.x折腾记 - (10) 给axios做个挺靠谱的封装(报错,鉴权,跳转,拦截,提示)

前言

不推荐完全copy过去,可以看看我是如何针对我这边业务;

做的一个axios的封装及实现的思路

需求及实现

• 统一捕获接口报错
• 弹窗提示
• 报错重定向
• 基础鉴权
• 表单序列化

实现的功能

• 统一捕获接口报错 : 用的axios内置的拦截器
• 弹窗提示: 引入 Element UI的Message组件
• 报错重定向: 路由钩子
• 基础鉴权: 服务端过期时间戳和token,还有借助路由的钩子
• 表单序列化: 我这边直接用qs(npm模块),你有时间也可以自己写

效果图

坑都已经爬过,现在复现那些错误有点麻烦…所以没法录制动态图

用法及封装

用法

// 服务层 , import默认会找该目录下index.js的文件,这个可能有小伙伴不知道
// 可以去了解npm的引入和es6引入的理论概念
import axiosPlugin from "./server"; 
Vue.use(axiosPlugin);

• 对axios的封装(AXIOS:index.js)

import axios from "axios";
import qs from "qs";
import {
    Message } from "element-ui";
import router from "../router";

const Axios = axios.create({
   
  baseURL: "/", // 因为我本地做了反向代理
  timeout: 10000,
  responseType: "json",
  withCredentials: true, // 是否允许带cookie这些
  headers: {
   
    "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
  }
});

//POST传参序列化(添加请求拦截器)
Axios.interceptors.request.use(
  config => {
   
    // 在发送请求之前做某件事
    if (
      config.method === "post"
    ) {
   
      // 序列化
      config.data = qs.stringify(config.data);
      // 温馨提示,若是贵公司的提交能直接接受json 格式,可以不用 qs 来序列化的
    }

    // 若是有做鉴权token , 就给头部带上token
    // 若是需要跨站点,存放到 cookie 会好一点,限制也没那么多,有些浏览环境限制了 localstorage 的使用
    // 这里localStorage一般是请求成功后我们自行写入到本地的,因为你放在vuex刷新就没了
    // 一些必要的数据写入本地,优先从本地读取
    if (localStorage.token) {
   
      config.headers.Authorization = localStorage.token;
    }
    return config;
  },
  error => {
   
    // error 的回调信息,看贵公司的定义
    Message({
   
      //  饿了么的消息弹窗组件,类似toast
      showClose: true,
      message: error && error.data.error.message,
      type: 'error'
    });
    return Promise.reject(error.data.error.message);
  }
);

//返回状态判断(添加响应拦截器)
Axios.interceptors.response.use(
  res => {
   
    //对响应数据做些事
    if (res.data && !res.data.success) {
   
      Message(