Axios github address axios translation document

preface

In the previous small program project, although I encapsulated the simple PROMISE and the amount of code was much smaller, but for the data processing in the callback, a lot of verification code was the same, so the code was very uncomfortable to write.

For example,

Data returned by the back end

normal

data: {
    result: 1.metMsg: ' '.// Normally there is no error message
    data: {
       / / data}}Copy the code

Back-end maintenance, temporarily unavailable

data: {
    result: 2.// Indicates abnormal
    metMsg: 'Error message to front-end/user'.data: {}}Copy the code

This needs to be done in the callback for each request

.then(res => { if(res.data.result == 1) { // ... } else {//... Error message}})Copy the code

One or two might not feel like much, but dozens of pages, writing this repeated code hundreds of times, doesn’t it

The interceptor is very needed to help me solve this problem, wechat request does not provide the API of the interceptor, developers need to encapsulate an interceptor, the next time to write small programs can try to write one

Get into the business

The above development pain points are well addressed on Axios because axios provides interceptors.

Here, the front end and the back end, before the project starts to determine the parameters, the front end can do axiOS packaging

For example,

data: {
    result:,// 1 is normal 2 is abnormal 3....
    metMsg: 'Why abnormal reasons'.data: {} // 1 returns data and nothing else
}
Copy the code

According to the rules, encapsulation can be done

/utils/index (axios wrapper)

import axios from 'axios'
import { Alert } from 'react-native'
// Request the interceptor
axios.interceptors.request.use(
  function(config) {
    // Add response first class Settings
    config.headers.userToken = 'this is my token'
    return config
  },
  function(error) {
    return Promise.reject(error) // Request error})// Return the interceptor
axios.interceptors.response.use(
  function(response) {
    if(response.data.data.result ! =1) {
      let { retMsg } = response.data.data
      // There are some problems with the server
      Alert.alert('Warm tip', retMsg)
      // wait for button events
      return Promise.reject(retMsg)
    } else {
      // The server returns 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
}

Copy the code

The common part of the project that initiates the request, such as headers, is written in the request interceptor

The common part of the correct callback in a project, for example, the judgment given by the back end is written in the return interceptor

This makes it very, very convenient for us to write the request code in the business code

Project code

Import response from '/utils/response' import utils from '/utils/index' // React componentDidMount() {utils.getaxios (Response.listdata) // The header information is encapsulated in the request interceptor.then(res => {// The error situation has already been processed in the return interceptor, so the business code no longer needs to check whether it is true or not Enclosing setState ({city: res. Data. The data})}). The catch (res = > {}) / / RN error handling... }Copy the code

Daily summary, online about axios packaging has been a lot of articles, don’t spray if you don’t like ~~~