在RN項目上對axios的封裝

axios的github地址 axios翻譯文檔

前言

以前寫小程序項目,雖然進行了簡易的promise的封裝,代碼量小了不少 ,可是對於回調裏面的數據處理,不少驗證代碼都是同樣的,代碼寫起來就很不舒服,

例如

後端返回的數據

正常狀況

data: {
    result: 1,
    metMsg: '', // 正常狀況沒有錯誤信息
    data: {
       // 數據 
    }
}
複製代碼

後端維護了，暫時不能使用

data: {
    result: 2, // 表示不正常
    metMsg: '告訴前端/用戶的錯誤信息',
    data: {}
}
複製代碼

須要在每一個請求的回調裏面都要這樣判斷

.then(res => {
    if(res.data.result == 1) {
        // ...  下面的一系列操做
    } else {
        // ... 錯誤提示
    }
})
複製代碼

一個兩個可能感受沒什麼,可是幾十個頁面,寫這樣的重複代碼上百次,就很是蛋疼了

很是須要攔截器這樣的東西幫助我解決這個問題,微信request沒有提供攔截器的api,開發者須要本身封裝一個攔截器,下次寫小程序能夠試試寫一個

步入正題

以上開發的痛點在axios上能夠很好的解決,由於axios提供了攔截器（狗頭）

這裏 前端同窗與後端同窗,在項目開始前肯定參數,前端就能夠進行axios的封裝了

例如

data: {
    result: , // 1 爲正常 2 爲不正常 3 ....
    metMsg: '爲何不正常的緣由',
    data: {} // 1 返回data 其餘都不返回
}
複製代碼

根據規則就能夠進行封裝了

/utils/index（axios的封裝）

import axios from 'axios'
import { Alert } from 'react-native'
//請求攔截器
axios.interceptors.request.use(
  function(config) {
    // 添加響應頭等等設置
    config.headers.userToken = 'this is my token'
    return config
  },
  function(error) {
    return Promise.reject(error) // 請求出錯
  }
)

//返回攔截器
axios.interceptors.response.use(
  function(response) {
    if (response.data.data.result != 1) {
      let { retMsg } = response.data.data
      // 服務端出現了一些問題的狀況下
      Alert.alert('舒適提示', retMsg)
      // 等等按鈕事件
      return Promise.reject(retMsg)
    } else {
      // 服務端一切正常 返回data數據
      return response.data
    }
  },
  function(error) {
    return Promise.reject(error)
  }
)

const defaultData = {}
const defatltUrl = ''
function PostAxios(url = defatltUrl, data = defaultData) {
  return axios({
    method: 'POST',
    url,
    data
  })
}

function GetAxios(url = defatltUrl, data = defaultData) {
  return axios({
    method: 'GET',
    url,
    data
  })
}

export default {
  PostAxios,
  GetAxios
}

複製代碼

項目中的發起請求的公共部分,例如header 頭等等數據寫在請求攔截器中

項目中的正確回調的公共部分,例如,後端給定的判斷 寫在返回攔截器中

這樣咱們再業務代碼裏面寫請求代碼就很是很是方便

項目代碼

import response from '/utils/response' // 請求地址
import utils from '/utils/index' // axios的封裝

//react
componentDidMount() {
    utils.GetAxios(response.listData) // header信息封裝在請求攔截器中
      .then(res => {// 由於錯誤狀況已經在返回攔截器中進行的處理,因此業務代碼再也不須要判斷正誤
        this.setState({
          city: res.data.data
        })
      })
      .catch(res => {}) // RN進行錯誤處理....
  }
複製代碼

平常總結，網上關於axios封裝的文章已經不少，不喜勿噴~~~