基於 axios 的封裝請求

axios 一個實用的 http 請求庫,github 上已介紹其特性、兼容性、安裝、簡單使用、配置項等。基於上述官方介紹,封裝了一下請求方式:ios

import axios from 'axios'

// 多環境配置
const baseURL = process.env.NODE_ENV === 'development'
  ? 'http://localhost:4000'
  : 'http://localhost:4000'

// 請求攔截器(避免重複請求)
axios.interceptors.request.use(
  config => {
    let requestName = config.data.requestName
    if (requestName) {
      if (axios[requestName] && axios[requestName].cancel) {
        axios[requestName].cancel(`${requestName} 請求被取消`)
      }
      config.cancelToken = new axios.CancelToken(c => {
        axios[requestName] = {}
        axios[requestName].cancel = c
      })
    }
    return config
  }, 
  error => {
    return Promise.reject(error)
  }
)

// 響應攔截器(判斷後臺返回的狀態碼)
axios.interceptors.response.use(
  config => {
    return config
  }, 
  error => {
    console.log(error)
    let errMsg = ''

    if (error && error.response) {
      const map = new Map([
        [400, '錯誤請求'],
        [401, '未受權,請從新登陸'],
        [403, '拒絕訪問'],
        [404, '請求錯誤,未找到該資源'],
        [405, '請求方法未容許'],
        [408, '請求超時'],
        [500, '服務器端出錯'],
        [501, '網絡未實現'],
        [502, '網絡錯誤'],
        [503, '服務不可用'],
        [504, '網絡超時'],
        [505, 'http版本不支持該請求']
        // ...
      ])
      const defaultErrorMsg = `鏈接錯誤,服務器返回的狀態碼爲 ${error.response.status}`
      errMsg = map.get(error.response.status) || defaultErrorMsg
    } else {
      errMsg = "鏈接到服務器失敗"
    }

    return Promise.reject(errMsg)
  }
)

// get、post 請求方式地統一封裝
export default ({ url, data = {}, params = {}, ...args }) => {
  return new Promise((resolve, reject) => {
    axios({
      baseURL,
      url,
      params,
      data: {
        ...data,
        requestName: url.split('/').slice(-1).pop()
      },
      ...args
    })
      .then(res => resolve(res))
      .catch(err => {
        // 這裏能夠用全局 UI 函數提醒用戶
        reject(err)
      })
  })
}

// 請求舉例
/**
   get 請求:
   await request({
      method: 'get',
      url: '/user/12345',
      params: {
        name: 'Bob',
        age: 20
      }
    })

  post 請求:
  await request({
      method: 'post',
      url: '/user/12345',
      data: {
        name: 'Bob',
        age: 20
      }
    })
 */

請求以前作數據轉換?建立 axios 示例?axios 全局默認配置... 這些在 github 上官方已給出示例。git

相關文章
相關標籤/搜索