react-native 实际项目解析-异步请求

对fetch的封装

  • 1.定义状态码
  • 2.参数格式转换:因为content-type用的是application/x-www-form-urlencoded格式,所以要将参数格式转一下。而且设计的是如果是二级对象,就直接转成字符串就行。
  • 3.通过Promise拿到异步返回结果。
  • 4.token:这里与一个token校验,也就是登录之后后台返回一个token,其他调用接口都将token传过去。这里我将token存在了本地存储AsyncStorage。
  • 5.url控制:之后所有utl和接口,肯定也是要统一管理的。
  • 6.AsyncStorage:本地存储文件。这个存储过程都是异步的,然后通过promise返回了一个最后结果,所以处理的时候要记得异步处理。
import {
    AsyncStorage,
} from 'react-native';
export const STATE_CODE = {
    'ERROR_OK': 0
}
export const FetchHandler = function (url,opt) {
    let paramStr = '';
    let token = '';
    for(key in opt){
        if (opt[key] !== ''){
            if (typeof opt[key] == 'object') {
                paramStr += key + '=' + JSON.stringify(opt[key]) + '&'
            } else {
                paramStr += key + '=' + opt[key] + '&'
            }
        }
    }
    paramStr = paramStr.substring(0,paramStr.length - 1)

    return new Promise((resolve,reject) => {
        AsyncStorage.getItem('token',(error,result)=>{
            token = result;
        }).then(result=>{
            fetch(url, {
                method: "POST",
                mode: "cors",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                    'token': token
                },
                body: paramStr
            })
                .then((response) => response.json())
                .then(function (response) {
                    resolve(response)
                })
                .catch((reject)=>{
                    reject('request error')
                })
        });

    })
}

export const remoteHost = 'http://1.1.1.1:9000';

export const HTTP_URI = {
    'LOGIN_COACH': remoteHost + '/coach/psdLogin',  // 登录教练
    'SCHEDULE_WHERE': remoteHost + '/schedule/where',    // 获取
    'PROJECT_TIMES': remoteHost + '/schedule/busAndTimes',    // 获取项目和潜次
    'SCHEDULE_LIST': remoteHost + '/schedule/listSchedules',    // 获取日程列表
    'GET_LAN': remoteHost + '/user/lang',    // 获取语言列表
    'GET_COUNTRY': remoteHost + '/user/country',    // 获取语言列表
    'SEND_CODE': remoteHost + '/user/sendCode',    // 发送验证码
    'CHECK_CODE': remoteHost + '/user/validCode',    // 发送验证码
    'UPDATE_CODE': remoteHost + '/user/updatePassword',    // 发送验证码
};

    

随机浏览