淺談 Axios 在 Vue 項目中的使用

介紹

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。

特性

它主要有如下特性：

瀏覽器端發起XMLHttpRequests請求
Node端發起http請求
支持Promise API
攔截請求和響應
轉化請求和響應（數據）
取消請求
自動轉化json數據
客戶端支持抵御XSRF（跨站請求偽造）

安裝

Vue項目中使用如下命令安裝

npm install axios --save

使用

Axios擁有諸多配置項，由於項目中請求數量很多，因此考慮將其封裝成公共API，api.js調用一個配置文件config.js

api.js

import axios from 'axios'
import config from './config.js'

class API {
  // POST
  post(params) {
    config.data = params.data
    return axios.post(params.url,config.data,config)
  }
  // 此處可以封裝其他方法
}

export default API

config.js

export default {
  method: 'post',
  // 基礎url前綴
  baseURL: 'your request url',
  // 請求頭信息
  headers: {
    'Content-Type':'application/json;charset=UTF-8'
  },
  // 參數
  data: {},
  // 設置超時時間
  timeout: 10000,
  // 攜帶憑證
  withCredentials: false,
  // 返回數據類型
  responseType: 'json'
}
getBrandsByHot:function () {
  let params = {
    url:'/company/list',
    data:{
      cond:{},
      limit:9,
      order_word: "attention_rate",
      order_direction: -1,
      page:1
    }
  }
  api.post(params).then(response => {
    this.hot_brand = response.data
  }).catch({});
}

由於IE9不支持Promise，因此需要在項目入口main.js中打個補丁,否則無法發出請求

import 'babel-polyfill'

如上，已經能在IE9+上發起網絡請求，但是IE9上有個問題：response.data為undefined,因此需要對返回的數據針對不同瀏覽器進行處理，在API.js中加入如下攔截器

// 響應攔截
axios.interceptors.response.use(function (response) {
  var data
  // IE9時response.data是undefined，因此需要使用response.request.responseText(Stringify后的字符串)
  if(response.data == undefined){
    data = response.request.responseText
  } else{
    data = response.data
  }
  // 判斷data不是Object時，解析成Object
  if(!(data instanceof Object)){
    data = JSON.parse(data)
  }
  return data
}, function (error) {
  return Promise.reject(error)
});

進階使用

結合promise 統一請求進一步封裝成vue插件 可實現登錄、攔截、登出等功能，以及利用axios的http攔截器攔截請求和響應
api.js

export default function fetch (options) {
  return new Promise((resolve, reject) => {
    const instance = axios.create({
      baseURL: SERVER_BASE_URL,
      headers: {},
      transformResponse: [function (data) {
      }]
    })
    instance.interceptors.request.use(
      config => {
        return config
      },
      err => {
        return Promise.reject(err)
      })

    instance.interceptors.response.use(
      response => {
        return response
      },
      error => {
        return Promise.reject({code:1000}) // 返回接口返回的錯誤信息
      })

    //請求處理
    instance(options)
      .then((res) => {
        resolve(res.data)
        return false
      })
      .catch((error) => {
         reject(error)
      })
  })
}

然后我們可以吧請求放到一個文件統一維護（相同的請求再也不用寫多次了）
interface.js

const IS_GUEST = params => {
  return fetch({
    url: '/sys/role/getRoleIdByUserId',
    method: 'get',
    params: params
  })
}

const RESET_PASSWORD = params => {
  return fetch({
    url: '/person/resetPswByMobile',
    method: 'get',
    params: params
  })
}

export default apiList={
    IS_GUEST,
    RESET_PASSWORD
}

再來把封裝的axio作為vue的插件使用
index.js

//導入模塊
import apiList from './interface'

const install = function(Vue) {
    if (install.installed) return
    install.installed = true
    Object.defineProperties(Vue.prototype, {
        $api: {
            get() {
                return apiList
            }
        }
    })
}

export default {
    install
}

接下來我們vue中可以這樣使用axios
main.js先注冊插件

import api from './index'
Vue.use(api)

然后可以在任何文件愉快的使用起來 就像這樣

this.$api.RESET_PASSWORD().then(res=>{
    // ...
})