Инкапсуляция аксиом на проекте РН

React Native

аксиомыгитхаб-адрес документация по переводу axios

предисловие

напиши раньше小程序проект хоть и простойpromiseПакет, количество кода намного меньше,Но для обработки данных в обратном вызове, многие коды подтвержденияТакой жеДа, код очень неудобно писать,

Например

Данные, возвращаемые серверной частью

нормальные обстоятельства

data: {
    result: 1,
    metMsg: '', // 正常情况没有错误信息
    data: {
       // 数据 
    }
}

Бэкенд находится на техническом обслуживании, временно недоступен

data: {
    result: 2, // 表示不正常
    metMsg: '告诉前端/用户的错误信息',
    data: {}
}

Об этом нужно судить в обратном вызове каждого запроса

.then(res => {
    if(res.data.result == 1) {
        // ...  下面的一系列操作
    } else {
        // ... 错误提示
    }
})

Один-два могут ничего не почувствовать, но писать такой повторяющийся код сотни раз на десятки страниц очень больно.

Очень нужно拦截器Что-то вроде этого помогло мне решить эту проблему, wechatrequestAPI для перехватчиков не существует. Разработчики должны сами инкапсулировать перехватчик. В следующий раз, когда вы будете писать небольшую программу, вы можете попробовать написать ее.

перейти к делу

Вышеупомянутые болевые точки разработки могут быть хорошо решены с помощью axios, потому что axios предоставляет перехватчик (собачья голова).

Здесь фронтенд-студенты и бэкэнд-студенты определяют параметры до начала проекта, а фронтенд может инкапсулировать аксиомы.

Например

data: {
    result: , // 1 为正常 2 为不正常 3 ....
    metMsg: '为什么不正常的原因',
    data: {} // 1 返回data 其他都不返回
}

Он может быть упакован в соответствии с правилами

/utils/index(пакет аксиом)

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.Не нравится - не распыляйтесь~~~

Категории