淺談Vue.js與後端API互動——axios的應用

文章目錄

• 1. 背景
• • (1) 棄vue-resource推axios
  • (2) axios簡介
• 2. 實戰
• • (1) 安裝
  • (2) 改寫原型鍊
  • (3) 在元件中使用
• 3. 解決IE相容問題
• • (1) 安裝es6-promise
  • (2) 引入

1. 背景

(1) 棄vue-resource推axios

Vue.js之前是推薦使用的vue-resource，但之後尤雨溪（vue.js作者）釋出消息如下：

最近團隊讨論了一下，Ajax 本身跟 Vue 并沒有什麼需要特别整合的地方，使用 fetch polyfill 或是 axios、superagent 等等都可以起到同等的效果，vue-resource 提供的價值和其維護成本相比并不劃算，是以決定在不久以後取消對 vue-resource 的官方推薦。已有的使用者可以繼續使用，但以後不再把 vue-resource 作為官方的 ajax 方案。

這裡可以去掉 vue-resource，文檔也不必翻譯了。

消息原文：https://github.com/vuefe/vuejs.org/issues/186

目前主流的 Vue 項目，都選擇 axios 來完成 ajax 請求。

(2) axios簡介

npm網站對axios做了很詳盡的介紹：

https://www.npmjs.com/package/axios

中文可以參考之前轉載的文章《axios全攻略》

axios

Promise based HTTP client for the browser and node.js

Features:

Make XMLHttpRequests from the browser

Make http requests from node.js

Supports the Promise API

Intercept request and response

Transform request and response data

Cancel requests

Automatic transforms for JSON data

Client side support for protecting against XSRF

Browser Support:

2. 實戰

關于axios的基本情況就是這樣了，那麼如何在Vue的工程中進行使用呢？這裡給出最簡單的執行個體，axios還有很多進階的用法，在上文推薦的介紹中有詳細介紹。

(1) 安裝

在工程目錄下，使用指令行：

npm install axios --save-dev
           

--save-dev

以省掉手動修改package.json檔案的步驟。

(2) 改寫原型鍊

在main.js中引如axios。由于在其他元件中無法使用axios指令，是以需要将axios改寫為Vue的原型屬性。

import axios from 'axios' //引入axios

Vue.prototype.$ajax=axios //修改Vue的原型屬性
           

(3) 在元件中使用

在元件的鈎子函數中使用，與後端API互動。

mounted(){

	//GET
    this.$ajax({
      method: 'get',
      // url:'../static/test/getInfo.json', //<---本地位址
      url: '/api/drummer/8bd17859',
    }).then(response=>{
      let _data=response.data;
      alert("hello," + _data.username);
    }).catch(function(err){
        console.log(err)
    })
    
    //POST
    this.$ajax({
      method: 'post',
      url: '/api/drummer',
      data:{
        code: '1234567',
        username: 'Joyce'
      }
    }).then(response=>{
	    alert('post code done');
    }).catch(function(err){
        console.log(err)
    });
  }
           

3. 解決IE相容問題

在上文的介紹中，我們提到了浏覽器的相容性。IE9+是可以支援的，但是運作項目後，卻發現不可以。為什麼呢？

這是因為**IE整個家族都不支援promise。**如何解決？

(1) 安裝es6-promise

npm install es6-promise --save-dev
           

(2) 引入

main.js中引入ES6的polyfill。

import Es6Promise from 'es6-promise'

Es6Promise.polyfill();