axios的一些常見用法

zy_deng發表於2019-03-04
iOS

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 就可以發起請求了複製程式碼

相關文章