封装api请求模块

index.js - 封装axios

src/request/index.js 基础模板

import axios from 'axios'
const instance = axios.create({
  baseURL: '/yuantiku_api',    // 通过使用配置的proxy来解决跨域
  timeout: 5000
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  let token = localStorage.getItem("x-auth-token");
  if (token) {
    config.headers = {
      "x-auth-token": token
    }
  }
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response.data;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});
export default instance;

src/request/index.js 在上边基础上加上token过期判断 & 弹窗提示

import axios from 'axios'
import store from '../store'
const instance = axios.create({
  baseURL: '/yuantiku_api',    // 通过使用配置的proxy来解决跨域
  // baseURL: 'https://www.ahsj.link/rambo',    // 通过使用配置的proxy来解决跨域
  timeout: 5000
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  let token = localStorage.getItem("x-auth-token");
  if (token) {
    config.headers = {
      "x-auth-token": token
    }
  }
  //弹窗提示
  store.dispatch({type: "showToastFn" , value: {
    icon: "loading",
    title: "数据加载中..."
  }})
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  //关闭弹窗
  store.dispatch({type: "hideToastFn"});
  // 对响应数据做点什么
  return response.data;
}, function (error) {
  //过期
  if(error.response.data.errCode===1002){
    // token过期，先告诉用户登录失效，并且重新登录
    store.dispatch({type: "showToastFn" , value: {
      icon: "none",
      title: "登录失效，请重新登录"
    }})
    setTimeout(()=>{
      // 关闭alert
      store.dispatch({type: "hideToastFn"});
      // 跳转页面，开发阶段由于都是在localhost:8080根路径下开发，所以可以直接href跳转
      window.location.href = "./login"
      // 项目上线，由于路由模式改成了HashRouter，所以应该修改的是hash值
      // window.location.hash = "#/login"
    }, 2000)
  }
  // 对响应错误做点什么
  return Promise.reject(error);
});
export default instance;

api.js

src/request/api.js

import request from './request'
// 接口
export const HomeApi = () => request.get("/6666")
//组件调用
import {HomeApi} from 'api.js'
async function xx(){
  let res = await HomeApi()
}