React Native 网络请求封装ajax

1.新建Fetch.tsx(作者采用的是TypeScript)

import _ from 'lodash'
import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios'
import {Toast} from "antd-mobile-rn"

import {DeviceEventEmitter} from 'react-native'
import config from "./config";

interface ajaxOptions {
  baseURL?: string
  version?: string
  headers?: object
  method?: string
  data?: object
}

export const ajax = (url: string, options: ajaxOptions) => {
  let axiosOptions: AxiosRequestConfig = {}
  axiosOptions.baseURL = config.host
  axiosOptions.headers = {
//无请求头可忽略
    Authorization:'BasicAuth ' + config.ticket,
    ...options.headers
  }
//请求方式
  axiosOptions.method = options.method || 'get'
//超时时间
  axiosOptions.timeout = 30 * 1000

  if (options.data && _.includes(['get', 'delete'], options.method))
    axiosOptions.params = options.data
  else
    axiosOptions.data = options.data

  return new Promise<AJAXErrorResult>((resolve:any, reject:any) => {
    axios(url, axiosOptions)
      .then(async (res: AxiosResponse<ServerResponseData>) => {

        if(res.data.status === 1){
          resolve(res.data)
          return
          // @ts-ignore
        } else if (res.data.Status === 1) {
          resolve(res.data)
          return
        }

        Toast.fail(res.data.error)
        reject({
          ...res,
          handled:false
        })
      })
      .catch(async (err: AxiosError) => {
        console.warn(err)
        console.log(url,axiosOptions)
        if (!err.response) {
          Toast.fail('服务繁忙，稍候请重试')
          reject({ ...err, handled: true })
          return
        }

        if (err.response.status == 401) {
          reject({ handled: true })
          Toast.info('登录状态失效，请重新登录')

          DeviceEventEmitter.emit('LogoutEvent',null  )
        }
        else if (err.response.status == 400) {
          reject({
            data: err.response.data,
            message: _.get(err.response.data, 'msg'),
            handled: false
          })
        }
        else {
          reject({ ...err, handled: true })
          Toast.fail('服务繁忙，稍候请重试')
        }
      })
  })
}

export const GET = (url: string, options: ajaxOptions) => ajax(url, {
  ...options,
  method: 'get'
})
export const PUT = (url: string, options: ajaxOptions) => ajax(url, {
  ...options,
  method: 'put'
})
export const POST = (url: string, options: ajaxOptions) => ajax(url, {
  ...options,
  method: 'post'
})
export const DEL = (url: string, options: ajaxOptions) => ajax(url, {
  ...options,
  method: 'delete'
})

2.创建RequestHelper.ts

//引用
import { POST, GET, PUT, DEL } from "./Fetch";

// 获取验证码
export function requestForValidCode() {
  return GET('/api/User/GetValidateNumKey', {})
}
// 登录
export function requestForlogin(params: FormLoginModel) {
  return POST('Api/User/UserLogin', {
    data: {
      ...params
    }
  })
}

3.使用RequestHelper

requestForlogin({
      LoginName: phoneStr,
      LoginPass: password
    })
      .then((res: any) => {
       
      })
      .catch((err: any) => {
        if (!err.data.handled) {
        }
      })