axios拦截器

为什么要使用axios拦截器？

页面发送http请求，很多情况我们要对请求和其响应进行特定的处理；例如每个请求都附带后端返回的token，在这种情况下，axios为开发者提供了这样一个API（拦截器）。

拦截器分为：

• 请求（request）拦截器
• 响应（response）拦截器。

怎么操作？

request.js的编写(一般是在utils文件夹创建一个request.js)

import axios from "axios";//引入axios
import router from "../router/index";//引入路由
import store from "../store";//如果需要在store内取数据就要引入store

// 配置
const axiosInstance = axios.create({
    baseURL: 'http://192.168.0.182:8080',  //前部分地址
    timeout: 20000  // 请求超时时间（单位ms）
})

 // 添加请求拦截器
 axiosInstance.interceptors.request.use(config => {
    let token = localStorage.getItem("Token");
    //当前token值是本地存储，如果放在store内需store.state.token获取token
    if (token) {
      // 给请求头添加laohu-token
      config.headers["Token"] = token;
    }
    return config;
  },
  error => {
    console.log(error); // for debug
    Promise.reject(error);
  }
);


// 添加响应拦截器
axiosInstance.interceptors.response.use(response=> {
   // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
   // 否则的话抛出错误
   if (response.status === 200) {
         return Promise.resolve(response);
      } else {
          return Promise.reject(response);
      }
  }, error => {
    // 服务器状态码不是2开头的的情况
    // 这里可以跟你们的后台开发人员协商好统一的错误状态码
    // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
    // 下面列举几个常见的操作，其他需求可自行扩展
  if (error.response.status) {
      switch (error.response.status) {
       // 401: 未登录
       // 未登录则跳转登录页面，并携带当前页面的路径
       // 在登录成功后返回当前页面，这一步需要在登录页操作。
       case 401:
          router.replace({
          path: '/login',
          query: {
                   redirect: router.currentRoute.fullPath
               }
            });
        break;

        // 403 token过期
        // 登录过期对用户进行提示
        // 清除本地token和清空vuex中token对象
        // 跳转登录页面
        case 403:
          Message({
          message: '登录过期，请重新登录',
          duration: 1000,
          forbidClick: true
         });
         ....
         // 其他错误，直接抛出错误提示
         default:
           Message({
           message: error.response.data.message,
           duration: 1500,
           forbidClick: true
            });
     }
    return Promise.reject(error);
  });

 //导出
export default axiosInstance;

在项目中调用拦截器

axios封装好之后，调用就很简单了。我们把接口统一写在api文件夹中。（如果你的业务非常复杂，建议把不同模块或组件的请求分开写到不同的文件里，这样方便维护）。

//准备
import $http from "@/utils/request.js";
import qs from "qs"//用来序列化post类型的数据，某些请求会用得到

//发送axios请求
export const 接口名 = (data) => $http.post('前部分地址+后部分地址',qs.stringify(data)).then((data)=>{
    return data.data
  })

在具体的组件中进行调用

import { 接口名} from '@/api/接口js'
export default {
  data() {
    return {}
  },
  created() {
      this.getData();
  }
 methods:{
      getData() {
          接口名(参数).then(res => {
          console.log(res)
          //拿到的res进行一番操作或者渲染
          })
      }
  },
}

补充：

关于Vue中，序列化字符串，处理发送请求的参数
使用工具qs来处理参数

步骤：
1、首先先下载：npm i qs
2、然后引入 ：import qs from 'qs'
3、qs主要有两个方法 ：
方法一：将对象序列化，多个对象之间用&拼接（拼接是由底层处理，无需手动操作）

qs.stringify()  转换成查询字符串
let comments = {content: this.inputValue}
let comValue = qs.stringify(comments)

方法二：将序列化的内容拆分成一个个单一的对象

qs.parse() 转换成json对象
let comValue = qs.parse(comments)