1. 安裝axios 和 js-cookie

npm i axios js-cookie @types/js-cookie -S

2. 在src目錄下創(chuàng)建plugins文件夾棍矛，在里面創(chuàng)建cookie.ts 封裝一下js-cookie

import Cookies from 'js-cookie';

const TokenKey = 'token'
const RefreshTokenKey = 'refresh-token'

export function getToken() {
  return Cookies.get(TokenKey)
}
export function getTokenKey() {
  return TokenKey
}
export function getRefreshTokenKey() {
  return RefreshTokenKey
}

export function setToken(token: any) {
  return Cookies.set(TokenKey, token)
}

export function getRefreshToken() {
  return Cookies.get(RefreshTokenKey)
}

export function setRefreshToken(refreshToken: any) {
  return Cookies.set(RefreshTokenKey, refreshToken)
}

export function removeToken() {
  Cookies.remove(TokenKey)
  Cookies.remove(RefreshTokenKey)
}

3. 在src目錄下創(chuàng)建http文件夾，在里面創(chuàng)建攔截器配置文件interceptors.ts

因?yàn)榫秃?jiǎn)單的寫了一個(gè)例子，所以所有報(bào)錯(cuò)信息都是使用console.error();來返回 后面可以自己使用組件庫的彈框修改一下返回樣式即可

// 首先引入axios和上一步封裝的cookie方法
import axios, { AxiosInstance } from "axios";
import {
  setToken,
  setRefreshToken,
  getToken,
  getTokenKey,
  getRefreshToken,
  getRefreshTokenKey,
  removeToken,
} from "../plugins/cookie";

export class Interceptors {
  instance: AxiosInstance;
  constructor() {
    this.instance = axios.create({
      baseURL: "/api",
      timeout: 10000,
    });
  }
  // 初始化攔截器
  init() {
    // 請(qǐng)求接口攔截器
    this.instance.interceptors.request.use(
      (config) => {
        // 判斷一下是否有cookie 如果有的話則把cookie放入請(qǐng)求頭中
        if (getToken()) {
          config.headers[getTokenKey()] = getToken();
          config.headers[getRefreshTokenKey()] = getRefreshToken();
        }
        return config;
      },
      (err) => {
        console.error(err);
      }
    );

    // 響應(yīng)攔截器
    this.instance.interceptors.response.use(
      (response) => {
        const res = response.data;
        if (!response.status.toString().startsWith("2") || res.code === -1) {
          // 如果狀態(tài)碼不是2開頭或者接口code返回-1 則是返回錯(cuò)誤信息
          console.error("系統(tǒng)錯(cuò)誤，請(qǐng)檢查API是否正常狞悲！");
          return;
        }
        if (res.code !== 0) {
          if (res.code === -3) {
            console.error("登錄過期");
            removeToken();
          } else {
            if (res.msg) {
              console.error(res.msg);
            }
          }
          return Promise.resolve(res);
        } else {
          // 返回成功則把token存儲(chǔ)一下
          const headers = response.headers;
          const token = headers.token;
          const refresh_token = headers["refresh-token"];
          if (token && refresh_token) {
            setToken(token);
            setRefreshToken(refresh_token);
          }
          return res;
        }
      },
      (error) => {
        if (error.message === "Request failed with status code 500") {
          console.error("系統(tǒng)錯(cuò)誤庇绽，請(qǐng)檢查API是否正常！");
          return;
        }
        let code = -110;
        if (error && error.response && error.response.status) {
          code = error.response.status;
          // 登陸過期
          if (code === 401 || code === -3) {
            removeToken();
          }
        } else {
          console.error(error.message);
        }
        const err = { errCode: -110, errMsg: error.message || "Error" };
        return Promise.resolve(err);
      }
    );
  }
  // 返回一下
  getInterceptors() {
    return this.instance;
  }
}

4. 攔截器封裝好了就簡(jiǎn)單封裝一下axios 在http文件夾下創(chuàng)建index.ts

import { AxiosPromise, AxiosResponse } from "axios";
import { Interceptors } from "./interceptors";

// 請(qǐng)求配置
export class HttpServer {
  axios: any;
  // 獲取axios實(shí)例
  constructor() {
    this.axios = new Interceptors().getInterceptors();
  }
  // 簡(jiǎn)單封裝一下方法
  request(config: any): AxiosPromise {
    return new Promise((resolve, reject) => {
      this.axios(config).then((res: AxiosResponse) => {
        resolve(res);
      }).catch((err: any) => {
        reject(err)
      });
    });
  }
}

const http = new HttpServer()

export default http

5. 把封裝好的axios掛在到vue上 在之前的plugins文件夾下面新建axios.ts文件

個(gè)人習(xí)慣把插件都放在plugins文件夾下面

import { App } from "vue";
import http from "../http";
import { AxiosInstance } from "axios";

declare module "@vue/runtime-core" {
  interface ComponentCustomProperties {
    $axios?: AxiosInstance;
  }
}

export const axiosPlugin = {
  install(app: App): void {
    app.config.globalProperties.$axios = http;
  },
};

export default axiosPlugin

6.最后在main.ts里面引入

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { axiosPlugin } from './plugins/axios';

const app = createApp(App)
app.use(store).use(router).use(axiosPlugin).mount("#app")

使用方法

• 在ts文件使用

import http from "../http/index";
function userLogin(data: any) {
    return http.request({
        url: "/user/login",
        method: "post",
        data
    })
}

• 在vue文件使用

<script lang="ts">
import { getCurrentInstance } from "vue"
...
// 使用getCurrentInstance方法獲取當(dāng)前vdom實(shí)例
const axios = getCurrentInstance()?.appContext.config.globalProperties.$axios
axios.request({
  url: '/user/login',
  method: 'post',
  data: login
})
...
</script>