從入門到深入，手把手教你在 Vue 3 中正確使用 Axios，支持全局掛載、局部分離、使用 proxy 連接場景，適合所有前端小白和實戰設計。
大家好，我是石小石！一個熱愛技術分享的開源社區貢獻者，小冊《油猴腳本實戰指南》作者、CSDN專欄《Vite極速入門通關教程》作者。
一、安裝 Axios
npm install axios
二、Vue 3 中將 Axios 全局掛載
Vue 3 不再支持 Vue 2 中的 Vue.prototype 方式，而是通過 app.config.globalProperties 來達到相同效果：
全局掛載
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'const app = createApp(App)
app.config.globalProperties.$http = axiosapp.use(router).mount("#app")
三、在組件中使用 Axios
使用 getCurrentInstance 獲取當前實例 (dev-only)
import { getCurrentInstance, onMounted } from 'vue'export default {setup() {const { ctx } = getCurrentInstance();onMounted(() => {ctx.$http.get('/api/user').then(res => console.log(res));});}
};
使用 proxy 替代 ctx (推薦)
import { getCurrentInstance, onMounted } from 'vue'export default {setup() {const { proxy } = getCurrentInstance();onMounted(() => {proxy.$http.get('/api/user').then(res => console.log(res));});}
};
應對環境錯誤：ctx 在打包后無法訪問 globalProperties，需要使用 proxy 替代。
四、局部引入 + 分類使用
創建 /proxy/index.js
// proxy/index.js
import axios from 'axios';const getList = (url) => axios.get(url);export default {getList
};
在組件中使用
import axiosProxy from '../proxy';axiosProxy.getList('/api/todoList/list').then(res => {console.log(res.data);
});
五、Axios 基礎用法
GET 請求
axios.get('/user?id=12345').then(res => console.log(res)).catch(err => console.error(err));
POST 請求
axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone'
}).then(res => console.log(res));
六、通用 config 配置
axios({method: 'post',url: '/user',data: {firstName: 'Fred'},timeout: 1000,headers: {'X-Requested-With': 'XMLHttpRequest'}
});
常用 config 項目概覽
| 項目 | 說明 |
|---|---|
url | 請求地址 |
method | 方法 (get/post) |
baseURL | 基礎路徑 |
headers | 請求頭 |
params | url 取值參數 |
data | 請求體數據 (post 用) |
timeout | 超時時間 |
七、定義全局默認配置
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer token';
axios.defaults.timeout = 5000;
八、自定義實例 + 攔截器
定義一個獨立實例
const instance = axios.create({baseURL: '/api',timeout: 10000,
});
攔截器
instance.interceptors.request.use(config => {// 添加公共 tokenconfig.headers.Authorization = 'Bearer your_token';return config;
}, error => Promise.reject(error));instance.interceptors.response.use(response => {return response.data; // 簡化接口結果
}, error => Promise.reject(error));
九、返回結構
Axios 的響應包括如下結構：
{data: {}, // 接口返回數據status: 200, // HTTP 狀態碼statusText: 'OK',headers: {},config: {}, // 當前配置request: {} // XMLHttpRequest 對象
}
實際使用
axios.get('/user/12345').then(res => {console.log(res.data);
});
十、推薦擴展
- 把 axios 包裝成 hooks
- 封裝連接失敗提示 / 熱更新負載
- 通過
provide/inject分類控制 API 請求成本
總結
Vue 3 + Axios 是最常用的前后端通訊配置，重點是「全局 globalProperties 掛載 + proxy 替代 this + 分類 request」，這是一套無需完全依賴 UI 框架的經典組合技術路線，非常適合工程化開發和小組件開發。
關于我
最近在學習油猴腳本開發，寫了很多有趣的腳本：
- 接口攔截工具：修改CSDN博客數據接口返回值
- Vue路由一鍵切換：開發效率起飛
- 任意元素雙擊實現畫中畫：摸魚超級助手
- 掘金后臺自動簽到助手
- 解除文本復制、網頁復制、一鍵下載為MD
- 主題切換助手
如果你對油猴腳本開發也感興趣，可以參考我的油猴腳本開發教程
