當在TypeScript中使用axios進行網(wǎng)絡請求時，需要先安裝axios庫并進行相應的類型聲明安裝。以下是使用axios進行GET請求的示例代碼：
1.首先，安裝axios和對應的類型聲明：

npm install axios
npm install @types/axios

2、編寫reauest.ts

import router from '@/router'
import { useUserStore } from '@/stores'
import axios, { type Method } from 'axios'
import type { Data } from '@/types/user' // 導入 返回的根部數(shù)據(jù)類型
import { showToast } from 'vant'
import 'vant/es/toast/style'
// 1.創(chuàng)建axios實例對象,設置 基地址,設置 獲取響應超時時間
// 1.2.設置請求攔截器,剝離無效的數(shù)據(jù),返回錯誤信息
// 1.3.設置響應攔截器,status狀態(tài)碼為200,但是 res.data.code 不等于10000,則業(yè)務錯誤,返回錯誤信息;狀態(tài)碼為401,則去到登錄頁面(清除用戶信息)
// 2.導出 工具函數(shù)
const baseURL = 'https://consult-api.xxxxx.net/'
const instance = axios.create({
  // TODO 1:設置基地址,請求時間
  baseURL: baseURL,
  timeout: 10000
})

// 請求攔截器
instance.interceptors.request.use(
  (config) => {
    // TODO 2:設置請求頭 攜帶token令牌
    const store = useUserStore()
    if (store.user?.token && config.headers) {
      config.headers['Authorization'] = `Bearer ${store.user?.token}`
      console.log(config.headers.Authorization)
    }
    return config
  },
  (err) => Promise.reject(err)
)
// 響應攔截器,剝離無效的數(shù)據(jù),401攔截并跳登錄頁,同時清空用戶信息
instance.interceptors.response.use(
  (res) => {
    // 后臺約定，響應成功，但是code不是10000，是業(yè)務邏輯失敗
    // TODO 3:處理業(yè)務失敗
    // TODO 4:提取核心數(shù)據(jù)
    if (res.data?.code !== 10000) {
      showToast(res.data?.message || '網(wǎng)絡異常')
      return Promise.reject(res.data)
    }
    return res.data
  },
  (err) => {
    // TODO 5.處理401錯誤
    if (err.response.status === 401) {
      // 刪除用戶信息
      const store = useUserStore()
      store.delUser()
      // 跳轉登錄頁
      router.push(`/login?returnUrl=${router.currentRoute.value.fullPath}`)
    }
    return Promise.reject(err)
  }
)
// 工具函數(shù)
// 參數(shù): url:字符串 method:字符串字面量 submitData: 對象
// 由于 已經(jīng)在響應攔截器中 res.data
// 成功執(zhí)行 .then函數(shù)
// 錯誤執(zhí)行 .catch函數(shù)
const request = <T>(
  url: string,
  method: Method = 'get',
  submitData?: object
) => {
  return instance.request<T, Data<T>>({
    // get 請求體 params,其他post請求體 data
    // 設置動態(tài)屬性: method===get 請求體為 params,其他post請求體 為 data
    url,
    method,
    [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
  })
}

export { baseURL, instance, request }

3.封裝API

import { request } from '@/utils/request'
/**
 * 獲取首頁-xxx-列表數(shù)據(jù)
 */
export const getKnowledgePage = (params: KnowledgeParams) => {
  return request<KnowledgePage>('patient/home/knowledge', 'GET', params)
}

4.在vue中使用

import { bindMobile, loginByQQ } from '@/services/user'