【vue2.0進階】用axios來實現數據請求,簡單易用

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

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

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

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

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

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

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

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

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

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

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

 

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

 

 

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

 

 

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

 

寫法如下：

 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請求
 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，允許開發者配置默認值，攔截器，處理錯誤和消除請求等操作，十分簡單易用，在這裡就不一一展開講述了。

 原創教程：《ECMAScript 6 系列》

 原創教程：《Vue2.0基礎系列》

 附加習題：《ECMAScript 6 系列》的 2套

 附加習題：《Vue2.0基礎系列》的 1 套

 職場感悟：混口飯吃，談不上喜歡

 感到迷茫：我很努力，但依然很迷茫

 薪資待遇：那麼點工資，能招到人嗎？

 搞笑黑話：網際網路公司黑話，搞笑到爆

其實學好技術並不難，架構師免費分享全網全套最新web前端、JavaScript、HTML5、PHP、資料庫……等視頻資料！

[總價值超3萬！]年薪35萬以上的大牛幾乎都看了！

加微信: abc15689892 免費領取，由於領取的朋友比較多，所以加微信時一定要備註：555，否則很難通過。