vue3 學(xué)習(xí)筆記04 – axios的使用及封裝

• 安裝 Axios 和 TypeScript 類(lèi)型定義

npm install axios
npm install -D @types/axios

創(chuàng)建一個(gè) Axios 實(shí)例并封裝成一個(gè)可復(fù)用的模塊，這樣可以在整個(gè)應(yīng)用中輕松地進(jìn)行 API 請(qǐng)求管理。

• 在 src 目錄下創(chuàng)建一個(gè) services 文件夾，并在其中創(chuàng)建 api.ts 文件：

  // src/services/api.tsimport axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';// 創(chuàng)建一個(gè) axios 實(shí)例
const api: AxiosInstance = axios.create({baseURL: import.meta.env.VITE_APP_BASE_API,timeout: 30000, // 請(qǐng)求超時(shí)時(shí)間headers: {'Content-Type': 'application/json'// 其他默認(rèn)請(qǐng)求頭可以在這里配置}
});// 請(qǐng)求攔截器
api.interceptors.request.use((config: AxiosRequestConfig) => {// 在請(qǐng)求發(fā)送之前做些什么，例如加入 token 等操作return config;},(error) => {// 處理請(qǐng)求錯(cuò)誤return Promise.reject(error);}
);// 響應(yīng)攔截器
api.interceptors.response.use((response: AxiosResponse) => {// 在響應(yīng)數(shù)據(jù)返回之前做些什么，例如對(duì)響應(yīng)數(shù)據(jù)進(jìn)行處理return response.data;},(error) => {// 處理響應(yīng)錯(cuò)誤return Promise.reject(error);}
);export default api;

• 項(xiàng)目根目錄新建.env.dev – 開(kāi)發(fā)環(huán)境變量

NODE_ENV = 'development'
VITE_APP_BASE_API = '/api'
VITE_APP_TARGET_URL = "https://api.example.com"

• 項(xiàng)目根目錄新建.env.pro – 生產(chǎn)環(huán)境變量

NODE_ENV = 'production'
VITE_APP_BASE_API = '/api'
VITE_APP_TARGET_URL = "https://api.example.com"

• vite.config.ts中配置proxy

export default defineConfig({plugins: [vue()],server:{host: '0.0.0.0', // 允許IP訪問(wèn)proxy: {[env.VITE_APP_BASE_API]: {changeOrigin: true,target: env.VITE_APP_TARGET_URL,secure: false,rewrite: (path) => path.replace(new RegExp(`^${env.VITE_APP_BASE_API}`), '')},}}
})

• 使用axios封裝

  • 在src/api文件下新建login/login.ts文件

        import api from '@/services/api';import { AxiosPromise } from "axios";import { LoginData, LoginResult } from "./types";export function login(data:LoginData):AxiosPromise<LoginResult> {return api({url: '/mock/user/login',method: 'post',data})}
    

  • src/login/types.ts

        export interface LoginData {/*** 用戶名*/username: string;/*** 密碼*/password: string;}export interface userInfoVo {id: numbername: stringphone: number}/*** 登錄響應(yīng)*/export interface LoginResult {/*** token*/token?: string;/*** 過(guò)期時(shí)間(單位：毫秒)*/expireAt?: number;/*** 刷新token*/refreshToken?: string;/*** 用戶信息*/userInfo?: userInfoVo[];}
    

• vue文件中使用

<template>form表單.....
<el-button class="login-button" type="primary" @click="handleLogin" :loading="loading">登錄</el-button>
</template> 
<script setup lang="ts">
import { login } from '@/api/login/login'
import { useRouter } from 'vue-router'
let loading = ref(false)
const router = useRouter()
const handleLogin = ()=>{let data = {username:'xxx',password:'xxx'}loading.value = truelogin(data).then((res)=>{loading.value = false// 一些存儲(chǔ)token及其他信息的處理的處理....要干的事router.push('/')})
}
</script>