vue3 + typescript + axios封裝（附帶loading效果，...并攜帶跨域處理，...element-plus按需引入）

簡單的6步即可完成：

首先.在根目錄創建vue.config.js里面配置跨域處理,

然后在src下新建service目錄，在目錄中新建兩個ts檔案，一個為request.ts 另一個為api.ts

1.對vue.config.js進行一系列配置

module.exports = {
  // 別名
  configureWebpack: {
    resolve: {
      alias: {
        views: '@/views',
        com: '@/components'
      }
    }
  },
  // 跨域請求
  devServer: {
    // open: false,//
    // host: 'localhost',
    // port: 8080,
    // https: false,
    //以上的ip和埠是我們本機的;下面為需要跨域的
    proxy: {
      //配置跨域
      '/api': {
        target: 'https://www.liulongbin.top:8888/api/private/v1/', //這里后臺的地址模擬的;應該填寫你們真實的后臺介面
        ws: true,
        changOrigin: true, //允許跨域
        pathRewrite: {
          '^/api': '' //請求的時候使用這個api就可以
        }
      }
    }
  }
}

2.在request.ts中進行一系列配置

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios' //匯入axios 和鉤子
import { ElLoading } from 'element-plus' //匯入ElLoading
import { ILoadingInstance } from 'element-plus/lib/components/loading/src/loading.type' //匯入ElLoading鉤子

// 初始化loading

export class Request {
  public static axiosInstance: AxiosInstance
  public static loading?: ILoadingInstance //loading實體 掛載到公共的靜態屬性上 方便獲取

  public static init() {
    // 創建axios實體
    this.axiosInstance = axios.create({
      baseURL: '/api', //轉接
      timeout: 6000
    })
    // 初始化攔截器
    this.initInterceptors()
    return axios
  }

  // 初始化攔截器
  public static initInterceptors() {
    // 設定post請求頭
    this.axiosInstance.defaults.headers.post['Content-Type'] =
      'application/x-www-form-urlencoded'
    /**
     * 請求攔截器
     * 每次請求前，如果存在token則在請求頭中攜帶token
     */

    this.axiosInstance.interceptors.request.use(
      (config: AxiosRequestConfig) => {
        //  loading打開
        this.loading = ElLoading.service({
          lock: true,
          text: '正在請求資料...',
          background: 'rgb(0,0,0,0.5)'
        })

        const token = localStorage.getItem('ACCESS_TOKEN') //保存token到localStorage中
        if (token) {
          ;(config as any).headers.Authorization = 'Bearer ' + token //攜帶請求頭
          // ;(config as any).headers.Authorization = sessionStorage.token
        }
        return config
      },
      (error: any) => {
        console.log(error)
      }
    )

    // 回應攔截器
    this.axiosInstance.interceptors.response.use(
      // 請求成功
      (response: AxiosResponse) => {
        this.loading?.close() //將loading移除

        if (response.status === 200) {
          // return Promise.resolve(response.data);
          return response
        } else {
          Request.errorHandle(response)
          // return Promise.reject(response.data);
          return response
        }
      },
      // 請求失敗
      (error: any) => {
        const { response } = error
        if (response) {
          // 請求已發出，但是不在2xx的范圍
          Request.errorHandle(response)
          return Promise.reject(response.data)
        } else {
          // 處理斷網的情況
          // eg:請求超時或斷網時，更新state的network狀態
          // network狀態在app.vue中控制著一個全域的斷網提示組件的顯示隱藏
          // 關于斷網組件中的重繪重新獲取資料，會在斷網組件中說明
          // message.warn('網路連接例外,請稍后再試!')
          console.log('網路連接例外,請稍后再試!')
        }
      }
    )
  }

  /**
   * http握手錯誤
   * @param res 回應回呼,根據不同回應進行不同操作
   */
  private static errorHandle(res: any) {
    // 狀態碼判斷
    switch (res.status) {
      case 401:
        break
      case 403:
        break
      case 404:
        // message.warn('請求的資源不存在'),
        console.log('請求的資源不存在')
        break
      default:
        // message.warn('連接錯誤')
        console.log('連接錯誤')
    }
  }
}

3.在api.ts中對介面進一步管理

import { Request } from './request'//匯入請求攔截器request

export function getUserlist(parameter: any) {//匯出方法
  return Request.axiosInstance({
    url: '/login',
    method: 'post',
    data: parameter
  })
}

4.在main.ts中匯入請求攔截器 、element-plus

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 匯入請求攔截器
import { Request } from '@/service/request'
import VueAxios from 'vue-axios'

//element-plus 按需引入
import 'element-plus/dist/index.css' //區域樣式
import { components } from './plugins/element-plus' //區域js

const app = createApp(App)
for (const cpn of components) {
  app.component(cpn.name, cpn)
}

app.use(store).use(router).use(VueAxios, Request.init()).mount('#app')

5.在src下新建plugs目錄,里新建element-plus.ts 然后配置下面模塊

import {
  ElButton,
  ElTable,
  ElAlert,
  ElAside,
  ElAutocomplete,
  ElAvatar,
  ElBacktop,
  ElBadge,
  ElLink,
  ElForm,
  ElFormItem
} from 'element-plus'
export const components = [
  ElButton,
  ElTable,
  ElAlert,
  ElAside,
  ElAutocomplete,
  ElAvatar,
  ElBacktop,
  ElBadge,
  ElLink,
  ElForm,
  ElFormItem
]

6.在頁面按需匯入需要用到的api介面

<template>
  <div class="home">
    <div>ss</div>
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src
import { getUserlist } from '@/service/api' //介面
export default defineComponent({
  name: 'Home',
  components: {
    //掛載組件
    HelloWorld
  },
  setup() {
    //定義資料 和方法
    getUserlist({ username: 'admin', password: '123456' }).then((res) => {
      console.log(res)
    })

    return {}
  }
})
</script>