引言
axios作為一個廣泛使用的JavaScript庫，因其簡潔的API、強大的功能和良好的瀏覽器兼容性，成為了許多前端開發者在Vue 3項目中的首選。
?axios簡介
axios是什么？
axios是一個基于Promise的HTTP客戶端，用于瀏覽器和node.js環境中。它允許開發者以一種簡潔的方式發送異步HTTP請求到REST endpoints，并處理響應。axios支持請求和響應攔截器、自動轉換JSON數據、客戶端支持防御XSRF等特性。
axios的主要特點和優勢
- 基于Promise：axios使用Promise，這是現代JavaScript中處理異步操作的標準方式。
- 瀏覽器和Node.js兼容：axios可以在前端和后端環境中使用，方便前后端代碼共享。
- 請求和響應攔截器：可以添加攔截器來處理請求或響應，例如添加認證令牌、日志記錄等。
- 自動轉換JSON數據：axios會自動將JSON字符串轉換為JavaScript對象，反之亦然。
- 支持請求取消：可以取消正在進行的請求。
- 支持請求和響應的配置：可以對請求和響應進行詳細的配置，如超時設置、自定義HTTP頭等。
axios的基本使用方法（GET、POST請求示例）
GET請求示例：
// 使用axios發送GET請求
axios.get('https://api.example.com/data').then(function (response) {// 處理成功情況console.log(response.data);}).catch(function (error) {// 處理錯誤情況console.error(error);});
POST請求示例：
// 使用axios發送POST請求
axios.post('https://api.example.com/data', {firstName: 'Fred',lastName: 'Flintstone'}).then(function (response) {// 處理成功情況console.log(response.data);}).catch(function (error) {// 處理錯誤情況console.error(error);});
在這些示例中，我們使用了axios的.get()和.post()方法來發送GET和POST請求。每個方法都返回一個Promise對象，該對象在請求成功時解決，并在請求失敗時拒絕。通過.then()和.catch()方法，我們可以處理成功的響應和錯誤情況。
這些基本的使用方法是axios的核心，通過它們，開發者可以輕松地在Vue 3應用中實現與后端服務的交互。
安裝和配置axios
1.使用npm安裝axios：
npm install axios
2.或者使用yarn安裝axios：
yarn add axios3.同樣可以通過pnpm來安裝axios。但是我們首先確保項目中已經安裝了pnpm。如果還沒有安裝，可以通過npm或yarn來安裝pnpm：
npm install -g pnpm
或者
yarn global add pnpm
安裝完成后，你可以使用pnpm來安裝axios：
pnpm add axios
實戰階段
我們可以將封裝好的HTTP請求模塊命名為request.js，并使用request作為導入的別名。以下是創建一個名為request.js的封裝好的HTTP請求模塊的示例：
// request.js
import axios from 'axios';// 創建axios實例
const service = axios.create({baseURL: process.env.VUE_APP_BASE_API, // API的基礎URLtimeout: 5000 // 請求超時時間
});// 請求攔截器
service.interceptors.request.use(config => {// 在這里可以添加一些請求前的操作，例如添加tokenreturn config;},error => {// 請求錯誤處理console.error('Request Error:', error);return Promise.reject(error);}
);// 響應攔截器
service.interceptors.response.use(response => {// 對響應數據做點什么return response.data;},error => {// 響應錯誤處理console.error('Response Error:', error);return Promise.reject(error);}
);export default service;
然后，在你的Vue 3組件中，你可以通過導入上面創建的request.js模塊來發送HTTP請求：
// MyComponent.vue
<script setup>
import { ref } from 'vue';
import request from './request'; // 假設request.js位于同一目錄下const fetchData = async () => {try {const response = await request.get('/some-endpoint');// 處理響應數據console.log(response);} catch (error) {// 處理錯誤console.error('Error fetching data:', error);}
};// 調用fetchData以獲取數據
fetchData();
</script>
在這個示例中，我們使用request作為導入的別名，這樣在調用請求方法時，代碼更加簡潔明了。通過這種方式，你可以輕松地在多個組件中重用HTTP請求邏輯，同時保持代碼的清晰和組織性。此外，你還可以根據需要進一步封裝更多的請求方法（如POST、PUT、DELETE等），以及添加更多的配置和錯誤處理邏輯。
請求和響應攔截器的高級配置（以pinia為例子）
在Pinia中獲取token
首先，確保您已經在Pinia中定義了相應的store，并且該store中包含了token。例如：
// stores/auth.js
import { defineStore } from 'pinia';export const useAuthStore = defineStore('auth', {state: () => ({token: null,}),actions: {setToken(newToken) {this.token = newToken;localStorage.setItem('token', newToken);},removeToken() {this.token = null;localStorage.removeItem('token');},},
});
然后，在請求攔截器中，您可以從Pinia的store中獲取token并添加到請求頭中：
// request.js
import axios from 'axios';
import { useAuthStore } from '../stores/auth'; // 假設您的Pinia store文件位于此路徑const service = axios.create({baseURL: process.env.VUE_APP_BASE_API,timeout: 5000,
});service.interceptors.request.use(config => {const authStore = useAuthStore();const token = authStore.token;if (token) {config.headers['Authorization'] = `Bearer ${token}`;}return config;},error => {console.error('Request Error:', error);return Promise.reject(error);}
);export default service;
在響應攔截器中進行數據轉換、錯誤重試等操作
響應攔截器可以用來處理服務器返回的數據，例如轉換數據格式或處理特定的錯誤。以下是如何在響應攔截器中進行數據轉換和錯誤重試的示例：
// request.js
// ...之前的代碼service.interceptors.response.use(response => {// 假設服務器返回的數據格式為JSON，且包含data字段const data = response.data;// 可以根據需要對數據進行轉換或處理return data;},error => {// 響應錯誤處理// 例如，如果響應狀態碼為401（未授權），則可能需要重新登錄if (error.response && error.response.status === 401) {// 重定向到登錄頁面router.push('/login');}// 如果響應狀態碼為429（請求過多），則可以進行錯誤重試if (error.response && error.response.status === 429) {// 重試邏輯console.log('Request was rate limited, retrying...');// 可以在這里實現重試邏輯，例如使用遞歸調用或使用第三方庫}return Promise.reject(error);//這行代碼的意思是返回一個被拒絕的Promise對象，并將error作為拒絕的原因}
);export default service;資料推薦
1.axios官方文檔：Axios中文文檔 | Axios中文網
2.Vue.js官方文檔：https://cn.vuejs.org/
3.Pinia官方文檔：Pinia | The intuitive store for Vue.js
總結
axios是一個功能強大的HTTP客戶端庫，它使用Promise來處理異步請求，非常適合在Vue 3項目中使用
)
)
