當前位置：首頁 > 前端技术 > vue >内容正文

vue

【vue2.0进阶】用axios来实现数据请求，简单易用

發布時間：2025/3/15 vue 35 豆豆

生活随笔收集整理的這篇文章主要介紹了【vue2.0进阶】用axios来实现数据请求，简单易用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

寫了幾期的黑話《互聯網公司黑話大全》，有個同學問vue2.0的進階篇算更新完了嗎？

讓我猛地想起進階篇在推出預告的時候，大家都提醒前端君，vue-resource已經停止更新了，現在都推薦使用了axios了。

嚇得我趕緊打開電腦，趕緊axios學習一番，并很好奇地想看看，這個在vue1.0的時候被官方推薦的 ajax 插件 vue-resource，到底經歷了什么，被大家遺棄了。

vue-resource不再更新

?我們來看看作者給出的解釋，原話如下：

最近團隊討論了一下，Ajax 本身跟 Vue 并沒有什么需要特別整合的地方，使用 fetchpolyfill 或是 axios、superagent 等等都可以起到同等的效果，vue-resource 提供的價值和其維護成本相比并不劃算，所以決定在不久以后取消對 vue-resource 的官方推薦。

已有的用戶可以繼續使用，但以后不再把 vue-resource 作為官方的 ajax 方案。這里可以去掉 vue-resource，文檔也不必翻譯了。

前端君為大家總結幾個關鍵點：

? ? 1.??維護成本與其價值相比不劃算

? ? 2.??其他插件也能滿足同等開發需求

? ? 3.??你可以繼續用，但不再更新

一起學習axios

既然官方都不再更新vue-resource，并推薦大家使用axios，那我們就一起來學習一下它。

同樣我們需要事先安裝好它，可以npm和bower安裝，我們這里用最簡單的cdn加載。

?<script src="https://unpkg.com/axios/dist/axios.min.js"> ?</script>

CDN安裝十分簡單，接下來，我們看看它的語法，如何實現數據請求和提交。

get請求

寫法如下：

?axios.get('/detail?id=10').then(function (res) {
??? //成功獲取數據
? ?console.log(res);
?}).catch(function (err) {
??? //請求錯誤
? ?console.log(err);
?});

使用過jquery的ajax方案的同學，學習axios應該沒有任何難度。get請求也可以通過 params 對象傳遞參數。寫法如下：

?axios.get('/detail', {
??? //參數
? ?params: {
??????? id: 10
??? }
?}).then(function (res) {
??? //成功獲取數據
??? console.log(res);
?}).catch(function (err) {
??? //請求錯誤
??? console.log(err);
?});

相比第一種寫法，這種寫法的可讀性更高，在接口后增加一個對象參數，其中一個屬性為params，它的值就是我們要傳遞的參數id:10。

post請求

寫法如下：

?//執行post請求
?axios.post('/add', {
??? name: '前端君',
??? age: 26
?}).then(function (res) {
? ? //請求成功
??console.log(res);
?}).catch(function (err) {
????//請求失敗
??console.log(err);
?});

多個請求并發

除了最常用的get請求和post請求以外，值得一提的是axios提供了一次性并發多個請求的API，使用方法如下：

?function getProfile(){
??? //請求1
??? return axios.get('/profile');
?}
?function getUser(){
??? //請求2
??? return axios.get('/user');
?}

?//并發請求
?axios.all([
??? getProfile(),
??? getUser()
?]).then(axios.spread((res1, res2)=>{
??? //兩個請求現已完成
? ?console.log(res1);
? ? console.log(res2);
?}));

我們事先定義了兩個方法??getProfile() ?和??getUser()??幫我們實現get請求。

在某個業務場景中，我們需要同時產生以上兩個get請求，并需要等待它們都請求完畢后再做邏輯處理，你也許會想到回調嵌套，但現在你可以使用axios的并發請求API:?axios.all()?

當這兩個請求都完成的時候會觸發?axios.spread()?函數，res1和res2兩個參數分別代表返回的結果，相當實用的API。

其實上面我們剛剛講到的?axios.get()??和??axios.post()?寫法是axios給我們提供網絡請求的一種別名方式，如果你不喜歡這種寫法，完成可以自己通過配置請求參數，實現你想要的請求效果。

舉個栗子，對比一下。

手動配置參數，實現一個post請求：

?// 發送一個 POST 請求
?axios({
??? method: 'post',
??? url: '/user',
??? data: {
??????? name: '前端君',
??? }
?});

使用post別名寫法，實現一個post請求：

?//發送一個 POST 請求
?axios.post('/user', {
? ? ?name: '前端君',
?})

兩種寫法均可，大家可以根據自己的喜好和習慣，任選一種。

別名寫法是為了大家方便地閱讀和編寫代碼，除了?axios.get()?和?axios.post()?，axios還為所有支持的請求方式提供了別名。

axios.request()

axios.delete( )

axios.head( )

axios.put( )

axios.patch( )

這些別名用法大同小異，大家需要用到的時候，可以查看axios的API文檔，也十分簡單。

除了以上常用的API以外，axios還提供了其他API，允許開發者配置默認值，攔截器，處理錯誤和消除請求等操作，十分簡單易用，在這里就不一一展開講述了。

總結

以上是生活随笔為你收集整理的【vue2.0进阶】用axios来实现数据请求，简单易用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。