安裝

yarn add --save axios vue-axios //不確定要不要
yarn add axios

axios 目錄結(jié)構(gòu)

image.png

index.ts

import router from "@/router";
import store from "@/store";
import axios, { AxiosRequestConfig, Method } from "axios";

// 定義接口
interface PendingType {
  url?: string;
  method?: Method;
  params: any;
  data: any;
  cancel: any;
}
// 請(qǐng)求失敗后的錯(cuò)誤統(tǒng)一處理

const errorHandle = (status: number, other: string) => {
  switch (status) {
    case 302: console.log('接口重定向了！');
      break;
    case 400:
      console.log("發(fā)出的請(qǐng)求有錯(cuò)誤，服務(wù)器沒(méi)有進(jìn)行新建或修改數(shù)據(jù)的操作==>" + status)
      break;
    // 401: 未登錄
    // 未登錄則跳轉(zhuǎn)登錄頁(yè)面，并攜帶當(dāng)前頁(yè)面的路徑
    // 在登錄成功后返回當(dāng)前頁(yè)面，這一步需要在登錄頁(yè)操作。
    case 401: //重定向
      console.log("token:登錄失效==>" + status + ":" + store.state.Roles)
      localStorage.remove(store.state.Roles)
      localStorage.get(store.state.Roles)
      router.replace({
        path: '/Login',
      });
      break;
    // 403 token過(guò)期
    // 清除token并跳轉(zhuǎn)登錄頁(yè)
    case 403:
      console.log("登錄過(guò)期,用戶(hù)得到授權(quán)，但是訪問(wèn)是被禁止的==>" + status)
      // store.commit('token', null);
      setTimeout(() => {
        router.replace({
          path: '/Login',
        });
      }, 1000);
      break;
    case 404:
      console.log("網(wǎng)絡(luò)請(qǐng)求不存在==>" + status)
      break;
    case 406:
      console.log("請(qǐng)求的格式不可得==>" + status)
      break;
    case 408: console.log(" 請(qǐng)求超時(shí)！")
      break;
    case 410:
      console.log("請(qǐng)求的資源被永久刪除，且不會(huì)再得到的==>" + status)
      break;
    case 422:
      console.log("當(dāng)創(chuàng)建一個(gè)對(duì)象時(shí)，發(fā)生一個(gè)驗(yàn)證錯(cuò)誤==>" + status)
      break;
    case 500:
      console.log("服務(wù)器發(fā)生錯(cuò)誤，請(qǐng)檢查服務(wù)器==>" + status)
      break;
    case 502:
      console.log("網(wǎng)關(guān)錯(cuò)誤==>" + status)
      break;
    case 503:
      console.log("服務(wù)不可用，服務(wù)器暫時(shí)過(guò)載或維護(hù)==>" + status)
      break;
    case 504:
      console.log("網(wǎng)關(guān)超時(shí)==>" + status)
      break;
    default:
      console.log("其他錯(cuò)誤錯(cuò)誤==>" + status)
  }
}

// 取消重復(fù)請(qǐng)求
const pending: Array<PendingType> = []
const CancelToken = axios.CancelToken

// 移除重復(fù)請(qǐng)求
const removePending = (config: AxiosRequestConfig) => {
  for (const key in pending) {
    const item: number =+ key;
    const list: PendingType = pending[key];
    // 當(dāng)前請(qǐng)求在數(shù)組中存在時(shí)執(zhí)行函數(shù)體
    if(list.url === config.url && list.method === config.method && JSON.stringify(list.params) === JSON.stringify(config.params) && JSON.stringify(list.data) === JSON.stringify(config.data)){
      // 執(zhí)行取消操作
      list.cancel('操作太頻繁，請(qǐng)稍后再試')
      // 從數(shù)組中移除記錄
      pending.splice(item, 1)
    }
  }
}

// 1.實(shí)例化請(qǐng)求配置
const instance = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  timeout: 3000,
  headers: {
    //php 的 post 傳輸請(qǐng)求頭一定要這個(gè) 不然報(bào)錯(cuò) 接收不到值
    "Content-Type": "application/json;charset=UTF-8",
    "Access-Control-Allow-Origin-Type": '*'
  }
})
// 2.請(qǐng)求攔截器
instance.interceptors.request.use((config) => {
  // 在請(qǐng)求之前做什么
  console.log('interceptors request : ', config)
  removePending(config);
  config.cancelToken = new CancelToken((c) => {
    pending.push({ url: config.url, method: config.method, params: config.params, data: config.data, cancel: c });
  })
  // if(localStorage.get(store.state.Roles)) {
  //   config.headers.Authorization = localStorage.get(store.state.Roles);
  // }
  return config
}, (error) => {
  // 請(qǐng)求錯(cuò)誤時(shí)做些什么～
  return Promise.reject(error)
})

// 3.響應(yīng)攔截器
instance.interceptors.response.use((response)=>{
  // 對(duì)響應(yīng)的數(shù)據(jù)做什么～
  console.log('response : ', response)
  removePending(response.config)
  // 請(qǐng)求成功
  if(response.status === 200 || response.status === 204) {
    return Promise.resolve(response.data.data)
  }else{
    return Promise.reject(response)
  }
  // return response
},(error)=>{
  const { response } = error;
  if (response) {
    errorHandle(response.status, response.data.message);

    // 超時(shí)重新請(qǐng)求
    const config = error.config;
    // 全局的請(qǐng)求次數(shù),請(qǐng)求的間隙
    const [RETRY_COUNT, RETRY_DELAY] = [3, 1000];

    if (config && RETRY_COUNT) {
      // 設(shè)置用于跟蹤重試計(jì)數(shù)的變量
      config.__retryCount = config.__retryCount || 0;
      // 檢查是否已經(jīng)把重試的總數(shù)用完
      if (config.__retryCount >= RETRY_COUNT) {
        return Promise.reject(response || { message: error.message });
      }
      // 增加重試計(jì)數(shù)
      config.__retryCount++;
      // 創(chuàng)造新的Promise來(lái)處理指數(shù)后退
      const backoff = new Promise<void>((resolve) => {
        setTimeout(() => {
          resolve();
        }, RETRY_DELAY || 1);
      });
      // instance重試請(qǐng)求的Promise
      return backoff.then(() => {
        return instance(config);
      });
    }

    return Promise.reject(response);
  } else {
    // 處理斷網(wǎng)的情況
    // eg:請(qǐng)求超時(shí)或斷網(wǎng)時(shí)，更新state的network狀態(tài)
    // network狀態(tài)在app.vue中控制著一個(gè)全局的斷網(wǎng)提示組件的顯示隱藏
    // 后續(xù)增加斷網(wǎng)情況下做的一些操作
    // store.commit('networkState', false);
  }
  // return Promise.reject(error)
})

export default instance

request.ts

import axios from "."
// import qs from "qs";

// 主要用于封裝基于axios配置的get/post/put/delete等使用方法。
export class request {
  static get = (url: string, params?: any) => {
    return new Promise((resolve, reject) => {
      axios.get(url, {params: params}).then((res: unknown) => {
        resolve(res)
      }).catch((err: any)=>{
        reject(err)
      })
    })
  }

  static post = (url: string, params?: any) => {
    return new Promise( (resolve, reject) => {
      axios.post(url, params).then( res =>{
        resolve(res)
      }).catch( err =>{
        reject(err)
      })
    })
  }
}

apis.ts

import { request } from "./request";

// 所有接口數(shù)據(jù)信息
class api {
  async login(loginInfo: any): Promise<any>{
    return (await request.post(`user/login`, loginInfo))
  }
}

export default new api()

使用

setup(){
    const store = useStore()
    const login = ()=>{
      const params = {
        code: "86",
        keep_alive: false,
        password: "qxia1213",
        phone: "18174956541",
      }
      store.dispatch('user/login', params)
    }
    return {
      login
    }
  }
// 調(diào)用
apis.login(data).then((user: User)=>{
   context.commit('SET_TOKEN', user.token || '')
   context.commit('SET_USER', user)
   resolve(user)
}).catch((error) => {
   context.commit('SET_TOKEN', '')
   context.commit('SET_USER', null)
   reject(error)
})