ReactNative 封装fetch网络请求
2018-03-01 17:36
525 查看
封装的fetch方法类
使用方法:
(1)
(2)
第二种, 将fetch封装成类
调用:
/** * Created by 卓原 on 2017/11/14. * zhuoyuan93@gmail.com */ /** * 请求头 * @type {{Accept: string, Content-Type: string}} */ const header = { 'Accept': 'application/json', 'Content-Type': 'application/json', }; /** * 注意这个方法前面有async关键字 * @param url 请求地址 * @param body 请求参数 * @param method 请求方法 大写 * @param successCallBack 网络请求成功的回调 * @param errorCallBack 出错的回调 * @returns {Promise.<*>} */ export 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) { let str = toQueryString(body); if (str && str.length > 0) url += '?' + str; console.log(url); try { // 注意这里的await语句,其所在的函数必须有async关键字声明 let response = await fetch(url); console.log('reqyestUrl:' + 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) { try { // 注意这里的await语句,其所在的函数必须有async关键字声明 let response = await fetch(url, { method: 'POST', headers: header, body: JSON.stringify(body) }); console.log('reqyestUrl:' + url); 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; }
使用方法:
(1)
import * as MyFetch from '../util/MyFetch';
(2)
fetch(url) { MyFetch.requestUrl(url, 'GET', '', 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 }) }) }
相关文章推荐
- React Native中的网络请求fetch和简单封装
- React Native中的网络请求fetch和简单封装
- React Native中的网络请求fetch和简单封装
- react-native(Fetch网络请求数据)
- 【React Native开发】 - fetch网络请求
- react-native-io-fetch io接口请求封装
- React-Native学习笔记之:Fetch网络请求
- React-Native 之 网络请求 fetch
- React Native 网络请求封装:使用Promise封装fetch请求
- React Native从零开始(七)Fetch网络请求
- React-Native 之 GD (九)POST 网络请求封装
- react-native网络请求Fetch中遇到的坑
- React-Native傻瓜式学习笔记(三):基于事件发布/订阅的网络请求工具类封装
- React Native 网络请求封装:使用Promise封装fetch请求
- react native 开发框架,封装网络请求,自定义控件,常用工具类
- React Native探索(五)使用fetch进行网络请求
- React Native 网络请求封装:使用Promise封装fetch请求
- React-Native 之 GD (八)GET 网络请求封装
- 关于React Native 网络请求以及变量赋值的问题
- react-native 网络请求,超时总结