🤍 前端開發工程師、技術日更博主、已過CET6
🍨 阿珊和她的貓_CSDN博客專家、23年度博客之星前端領域TOP1
🕠 牛客高級專題作者、打造專欄《前端面試必備》 、《2024面試高頻手撕題》、《前端求職突破計劃》
🍚 藍橋云課簽約作者、上架課程《Vue.js 和 Egg.js 開發企業級健康管理項目》、《帶你從入門到實戰全面掌握 uni-app》

Axios 是一個基于 promise 的 HTTP 客戶端，用于瀏覽器和 node.js。在 Vue3 項目中，你可以使用 Axios 來發送 HTTP 請求。

安裝 Axios

首先，你需要安裝 Axios：

npm install axios

或者使用 yarn：

yarn add axios

在 Vue3 中使用 Axios

你可以在 Vue3 的 setup 函數中使用 Axios 發送請求。以下是一個基本的例子：

import { ref } from 'vue';
import axios from 'axios';export default {
setup() {
const responseData = ref(null);
const error = ref(null);const fetchData = async () => {
try {
const result = await axios.get('https://api.example.com/data');
responseData.value = result.data;
} catch (err) {
error.value = err;
}
};// 調用 fetchData 函數來獲取數據
fetchData();return {
responseData,
error
};
}
};

在組件中使用 Axios

你可以在組件的方法中使用 Axios，或者在 onMounted 生命周期鉤子中調用它來在組件加載時獲取數據。

使用方法

<template>
<div v-if="error">An error occurred: {{ error.message }}</div>
<div v-else-if="responseData">
<!-- 渲染響應數據 -->
</div>
</template><script>
import { ref, onMounted } from 'vue';
import axios from 'axios';export default {
setup() {
const responseData = ref(null);
const error = ref(null);const fetchData = async () => {
try {
const result = await axios.get('https://api.example.com/data');
responseData.value = result.data;
} catch (err) {
error.value = err;
}
};onMounted(() => {
fetchData();
});return {
responseData,
error
};
}
};
</script>

使用 Axios 攔截器

Axios 允許你設置請求和響應攔截器，這可以在全局或實例級別進行。

全局攔截器

axios.interceptors.request.use(config => {
// 在發送請求之前做些什么
return config;
}, error => {
// 對請求錯誤做些什么
return Promise.reject(error);
});axios.interceptors.response.use(response => {
// 對響應數據做點什么
return response;
}, error => {
// 對響應錯誤做點什么
return Promise.reject(error);
});

實例攔截器

const instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});instance.interceptors.request.use(config => {
// 在發送請求之前做些什么
return config;
}, error => {
// 對請求錯誤做些什么
return Promise.reject(error);
});

總結

Axios 是一個強大的 HTTP 客戶端，可以很容易地在 Vue3 項目中使用。通過使用 Composition API，你可以將 Axios 請求集成到 setup 函數中，使得數據獲取邏輯更加清晰和模塊化。記得處理好錯誤，并在需要時使用攔截器來統一處理請求和響應。