ReactNative 封装fetch网络请求

本文主要是介绍ReactNative 封装fetch网络请求，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

封装的fetch方法类

/*** Created by 卓原 on 2017/11/14.* zhuoyuan93@gmail.com*//*** 注意这个方法前面有async关键字* @param url  请求地址* @param body 请求参数* @param method 请求方法 大写* @param successCallBack  网络请求成功的回调* @param errorCallBack    出错的回调* @returns {Promise.<*>}*/
function requestUrl(url, method, body, successCallBack: func, errorCallBack: func) {if ('GET' === method) {get(url, body, successCallBack, errorCallBack);}else {post(url, body, successCallBack, errorCallBack);}
}/*** get请求*/
async function get(url, body, successCallBack, errorCallBack) {if (body) {let str = toQueryString(body);if (str && str.length > 0) url += '?' + str;}console.log(url);try {// 注意这里的await语句，其所在的函数必须有async关键字声明let response = await fetch(url);console.log('getUrl:' + url);let responseJson = await response.json();return successCallBack(responseJson);} catch (error) {return errorCallBack(error);//console.error(error);}
}/*** post请求*/
async function post(url, body, successCallBack, errorCallBack) {/*** 请求头* @type {{Accept: string, "Content-Type": string, uk: string}}*/const headers = {'Accept': 'application/json','Content-Type': 'application/json',};try {// 注意这里的await语句，其所在的函数必须有async关键字声明let response = await fetch(url, {method: 'POST',headers,body: JSON.stringify(body)});console.log(`postUrl:${url},headers:${headers},body:${JSON.stringify(body)}`);let responseJson = await response.json();return successCallBack(responseJson);} catch (error) {return errorCallBack(error);}
}/*** 用于对对象编码以便进行传输* @param obj 对象参数* @returns {string} 返回字符串*/
function toQueryString(obj) {let str = '';if (obj) {let keys = [];for (let key in obj) {keys.push(key);}keys.forEach((key, index) => {str += key + '=' + obj[key];if (index !== keys.length - 1) {str += '&';}});}return str;
}export default {requestUrl,get,post,
};

Tips：
post请求时候，header我写在了post方法体内，可以针对自己需求改动headers内容。
当然你也可以定在在外层，但是想动态修改headers不方便。

使用方法:
(1)

import Fetch from '../utils/FetchUtil';

(2)

Fetch.get(url, '',result => {console.log(result)}, error => {console.log(error)});

第二种, 将fetch封装成类

/*** Created by 卓原 on 2018/3/1.* zhuoyuan93@gmail.com*/export default class HttpUtil {static get(url) {return new Promise((resolve, reject) => {fetch(url).then(response => response.json()).then(result => {resolve(result);}).catch(error => {reject(error);})})}static post(url, data) {return new Promise((resolve, reject) => {fetch(url, {method: 'POST',header: {'Accept': 'application/json','Content-Type': 'application/json',},body: JSON.stringify(data)}).then(response => response.json()).then(result => {resolve(result)}).catch(error => reject(error))})}}

调用:

import HttpUtil from '../util/HttpUtil';load(url) {HttpUtil.get(url).then(result => {this.setState({data: result});console.log(this.state.data)}).catch(error => {this.setState({data: error})})}