axios的一些常見用法

axios 是一個在前端開發中是使用頻率極高的庫。它既能運行在瀏覽器中，又可在 Node.js 後端項目中使用。本文主要結合本身的開發項目，談一下 axios 在瀏覽器中的一些常見用法。

基本用法

在項目開發中，能夠經過 axios.create 建立一個實例，對該實例進行一些配置，便獲得了一個專門用來與後端服務器進行通訊的 ajax 函數。

const instance = axios.create()複製代碼

下面一些對該實例的配置：

baseURL

在正式環境或者是開發環境，配置 baseURL 可讓咱們很方便的設置路由的轉發規則。

const instance = axios.create({
    baseURL: '/api/'
})複製代碼

header

在單網頁應用中，經過在請求頭設置一些信息，好比說把 token 放在請求的頭部。

// 繼續對剛剛建立的示例進行配置
instance.defaults.headers.common['x-auth-token'] = 'some token'複製代碼

interceptors

經過配置攔截器，對請求與響應進行處理。
假設這裏服務器的返回值相似這種結構：

{
    code: 200, 
    data: Object,
    msg: ''
}複製代碼

其中 data 是咱們真正須要的信息，添加一個 response 的攔截器處理提取其中的 data 。經過檢查 code 值，判斷響應值是否符合要求。不符合要求時，只返回錯誤信息，在以後的回調函數處理錯誤便可。

// 處理響應成功
// axios 會對響應的結果進行一層封裝，直接取data
instance.interceptors.response.use(({data}) => {
    if (data.code === 200) {
        return data.data
    } else {
        console.error(res)
        // 假設這裏有一個 Toast 組件
        Toast(res.msg)
        return Promise.reject({
            msg: msg
        })
    }
})複製代碼

params 的用法

有些時候，調取一個有查詢條件較多的接口，使用 axios.get 時傳入一個包含 parmas 字段的對象是最便捷的方式。

let params = {
    keyWord: null,
    name: 'xxx',
    age: 22
}
// 爲 null 的屬性都會被過濾掉，最終的請求 url 是 /person?name=xxx&age=22
instance.get('/person', { params })複製代碼

上傳文件到七牛示例

上文的 instance 是用來與服務器端通訊的。如今上傳文件到七牛，直接使用 axios 來上傳。 根據 七牛開發者文檔 ，向七牛服務器提交一個 FormData 對象便可。這個 FormData 對象中必須包含 token 與 file 。

// 假設這裏有一個 input 框： <input id="input" type="file" />
const file = document.getElementById('input').files[0]
const formData = new FormData()
formData.append('token', token) // token 由服務器端生成
formData.append('file', file)
axios.post('http://upload.qiniu.com/', formData).then(({ data }) => {
    console.log(data) // 返回值
})複製代碼

對於上傳文件的操做，耗時較長，經過監聽 progress 事件能夠獲取到上傳進度的信息。上傳文件的代碼須要做出一些調整。

axios.post('http://upload.qiniu.com/', {
    data: formData,
    onUploadProgress: (e) => {
        const percentComplete = e.loaded / e.total // 上傳的進度
    }
}).then(({ data }) => {
    console.log(data) // 返回值
})複製代碼

一些場景下，須要上傳 base64 編碼圖。根據 七牛上傳文檔 ，在上傳時，設置請求頭部的 Content-Type 與 Authorization，在請求的包體內放入 base64 編碼的圖片。這裏的代碼要作出一些調整。

axios({
  method: 'post',
  url: 'https://upload.qiniup.com/putb64/-1',
  headers: {
    'Content-Type': 'application/octet-stream',
    Authorization: `UpToken ${token}`
  },
  data: imgSrc.split('base64,')[1] // 直接傳遞內容
})複製代碼

與狀態管理庫配合使用

在單網頁應用中，用戶的 token 信息是保存在 store 中的。當用戶登陸或者是檢測到token 過時時，須要作動態改變 axios 實例的一些參數。
假設咱們這裏使用的狀態管理庫是 Redux。
在攔截器中，判斷 token 是否過時。

instance.interceptors.response.use(({data}) => {
    if (data.code === 200) {
        return data.data
    } else if (data.code === 40001){ // code: 40001 表示 token 過時
      store.commit(CLEAR_TOKEN)
    }
    ...
})複製代碼

當 store 發生改變時，動態改變傳遞給後端的 token 信息。

store.subscrible(() => {
    instance.defaults.headers.common['token'] = store.getState().token
})複製代碼

與 Vue 配合使用

在項目中，許多的組件都要導入 axios 庫。若是項目使用是 Vue，把 axios 實例註冊成 Vue 插件，避免了重複再導入的問題。經過添加 Vue 實例方法註冊 Vue 插件 便可。

// http.js 建立 instance
// 導出一個包含 install 函數的對象
export default {
  install (Vue) {
    Vue.prototype.$http = instance
  }
}
// main.js
Vue.use(http) // 在 Vue 組件中 this.$http 就能夠發起請求了複製代碼