在RN專案上對axios的封裝

小綠和小藍發表於2018-12-11
iOS封裝

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封裝的文章已經很多，不喜勿噴~~~

相關文章