React Native 教程(三): fetch 使用Promise封装网络请求

5,233 阅读2分钟

1.fetch简介

React Native官方推荐使用Fetch API。 官方文档: React Native 网络请求官方文档

2.结构

  • http.js fetch get post 封装
  • api.js 所有请求的存放

3.代码

http.js

let common_url = 'https://xlite.kedacom.com/xlite/api'; //请求的url
let header = {
    "Content-Type": "application/x-www-form-urlencoded",
    "Cache-Control": "no-cache",
    // "accesstoken": token  //用户登陆后返回的token,某些涉及用户数据的接口需要在header中加上token
};

const http = {
    get(url, params) {
        if (params) {
            let paramsArray = [];
            //拼接参数
            Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))
            if (url.search(/\?/) === -1) {
                url += '?' + paramsArray.join('&')
            } else {
                url += '&' + paramsArray.join('&')
            }
        }

        return new Promise(function (resolve, reject) {
            fetch(common_url + url)
                .then((response) => response.json()
             //将返回数据转化为json,也可以转为text(),否则无法看到返回数据,且必须回调才可以看到
                 )        
                .then((responseData) => {
                    resolve(responseData);
                })
                .catch((err) => {
                    console.log("err:",err)
                    reject(err);
                });
        });
    },
    post(url, params) {
        return new Promise(function (resolve, reject) {
            fetch(common_url + url, {
                method: 'POST',
                headers: header,
                body: JSON.stringify(params)   //body参数,通常需要转换成字符串后服务器才能解析
            }).then((response) => response.json())
                .then((responseData) => {
                    console.log('res:', url, responseData);   //网络请求成功返回的数据
                    resolve(responseData);
                })
                .catch((err) => {
                    console.log('err:', url, err);   //网络请求失败返回的数据  
                    reject(err);
                });
        });
    },
};
//导出
export default http;

所有api的封装: api.js

一般情况下我们会把所有的api请求封装到同一个文件里

import http from './http';
// promise的封装操作
function to(promise){
    return promise
    .then(data => {
      return [null, data];
    })
    .catch(err => [err]);
}

const httpApi={	
	// login请求
	async login(params) {
		const url = '/userManage/login';
		const [err, res] = await to(http.get(url, params));
		if (err) {
            //请求失败
			return Object.assign(err, {
				status: "406",
				description: err.errMsg
			}, true);
		}
        //请求成功
		return res;
	},
    //logout 请求
    async logout(params) {
		const url = '/userManage/logout';
		const [err, res] = await to(http.get(url, params));
		if (err) {
			return Object.assign(err, {
				status: "406",
				description: err.errMsg
			}, true);
		}
		return res;
	},
    //其他业务请求.....
}
export default httpApi;
接下来我们到登录页login.js中调用一下
//1.首先导入api.js
import httpApi from '../utils/api';

//正文某一个登陆按钮方法
 async toLogin() {
     let params = {
          username: "username",
          password: "password",
     };
  //2.调用请求接口 ,传入参数即可
     let res = await httpApi.login(params);
     
     //请求回复的一些操作,这里根据你们的业务员需求和接口自定义
     console.log(res)

    }