技術標籤：vue.jsaxios

目錄

axios 是什麼 --文件

axios應用場景

自定義請求配置資訊

新增請求攔截

新增響應攔截

vue專案中的攔截器

axios 是什麼 --文件

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中，本質上也是對原生XHR的封裝，只不過它是Promise的實現版本，符合最新的ES規範，有以下特點：

• 從瀏覽器中建立 XMLHttpRequests
• 從 node.js 建立 http 請求
• 支援 Promise API
• 攔截請求和響應
• 轉換請求資料和響應資料
• 取消請求
• 自動轉換 JSON 資料
• 客戶端支援防禦 XSRF

axios應用場景

傳送請求前進行攔截，對請求，以及引數做一些全域性處理，比如：為每個請求帶上公參token，對post請求引數做一個轉換
對響應進行攔截，判斷token是否過期，是否有許可權，以及異常頁面的跳轉

請求配置介紹

• url -- 請求的伺服器
• method -- 請求方法
• baseURL -- 自動加在url前面，便於為axios例項傳遞相對url
• transformResquest -- 在向伺服器傳送請求前，修改請求資料
• transformResponse-- 在傳遞給then/catch前，修改響應資料
• headers -- 自定義請求頭
  …… // 引數有很多，參考官網，不一一寫了

自定義請求配置資訊

const ajaxUrl =
  process.env.API_PATH === 'live' || srcUrl > -1 ? config.baseUrl.pro : preSrcUrl > -1 ? config.baseUrl.pre : config.baseUrl.uat
// 建立axios例項，防止汙染全域性
let instance = axios.create({
  baseURL: ajaxUrl
})
// 頭資訊
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

新增請求攔截

預設情況下，axios將JavaScript物件序列化為JSON

引入QS對POST請求的引數進行轉換
import Qs from 'qs'

instance.interceptors.request.use(
  req => {
    // 在傳送請求之前做什麼
    // 如果是post請求，需要設定請求頭和轉換引數的資料格式
    if (req.method === 'post') {
      if (!req.headers['Content-type']) {
        req.headers['Content-type'] = 'application/x-www-form-urlencoded'
        req.data = Qs.stringify(req.data)
      }
    }
    return req
  },
  () => {
    // 對請求錯誤做些什麼
    const returnData = {
      returndata: {
        status: 'error'
      }
    }
    return Promise.resolve(returnData)
  }
)

新增響應攔截

可在此處做許可權的驗證，以及介面異常過濾

instance.interceptors.response.use(
  res => {
    // 登入失效的number=10008返回一個特殊的值
    // 登入失效時跳轉至登入頁面
    if (res.status === 200) {
      if (res.data.errno === 10008) {
        // 跳到登入介面
        store.dispatch('toLogin')
      } else if (res.data.errno === 10000) {
        // 正常返回值
        return Promise.resolve(res.data.data)
      } else {
        // 登入未失效，返回的錯誤的no
        iView.Modal.error({
          title: '通知',
          content: `<p>錯誤程式碼：${res.data.errno}</p>
                  <p>錯誤資訊：${res.data.errmsg}</p>`
        })
        return Promise.resolve('errorstatus')
      }
    } else {
      iView.Modal.error({
        title: '通知',
        content: `<p>資料服務異常【${res.status}】</p>
                <p>請聯絡管理員</p>`
      })
    }
  },
  () => {
    iView.Modal.error({
      title: '通知',
      content: `<p>資料服務異常</p>
              <p>或登入已失效，請重新登入</p>`
    })
    return Promise.resolve('errorstatus')
  }
)

最後匯出例項

export default instance

使用：

import instance from './axios'

/* 驗證登陸 */
export function * (data) {
  return instance.post('/url', data)
}