在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封装的文章已经不少，不喜勿喷~~~