react-native fetch 请求封装
1.fetch 函数封装
fetch.js
/**
* 请求头
* @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;
}
.
react-native fetch 请求封装的更多相关文章
- React Native 网络请求封装:使用Promise封装fetch请求
最近公司使用React作为前端框架,使用了异步请求访问,这里做下总结: React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRe ...
- [RN] React Native Fetch请求设置超时
一.实现思路 根据Promise.race的特性,我们在Promise.race里面添加两个任务,一个是正常的网络请求任务A,另外一个便是网络延时任务B,网络延时可以利用setTimeout方法实现. ...
- 《React Native 精解与实战》书籍连载「React Native 网络请求与列表绑定」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- React Native网络请求
很多移动应用都需要从远程地址中获取数据或资源.你可能需要给某个REST API发起POST请求以提交用户数据,又或者可能仅仅需要从某个服务器上获取一些静态内容--以下就是你会用到的东西.新手可以对照这 ...
- react之fetch请求json数据
Fetch下载 npm install whatwg-fetch -S Fetch请求json数据 json文件要放在public内部才能被检索到
- React Native 网络请求
如下面的Code,分别介绍了GET,POST,以及使用XMLHttpRequest的Get请求. import React, { Component } from 'react'; import { ...
- React 使用 fetch 请求天气
中国天气网(http://www.weather.com.cn)提供了查询天气的 API,通过传入城市 id, 可以获得当前城市的天气信息,API 相关信息如下: 规格 描述 主机地址 http:/ ...
- React Native之Fetch简单封装、获取网络状态
1.Fetch的使用 fetch的使用非常简单,只需传入请求的url fetch('https://facebook.github.io/react-native/movies.json'); 当然是 ...
- [书籍精读]《React Native精解与实战》精读笔记分享
写在前面 书籍介绍:本书由架构师撰写,包含ReactNative框架底层原理,以及与iOS.Android混合开发案例,精选了大量实例代码,方便读者快速学习.主要内容分为两大部分,第1部分" ...
随机推荐
- 算法详解(LCA&RMQ&tarjan)补坑啦!完结撒花(。◕ˇ∀ˇ◕)
首先,众所周知,求LCA共有3种算法(树剖就不说了,太高级,以后再学..). 1.树上倍增(ST表优化) 2.RMQ&时间戳(ST表优化) 3.tarjan(离线算法)不讲..(后面补坑啦!) ...
- 【linux高级程序设计】(第十一章)System V进程间通信 2
消息队列 消息队列是消息的链式队列,模型如下: 包括两种数据结构: msqid_ds消息队列数据结构 msg消息队列数据结构 struct msg_msg{ struct list_head m_li ...
- Appium+python自动化17-启动iOS模拟器APP源码案例【转载】
前言 上一篇已经可以启动iOS模拟器上的safari浏览器了,启动app比启动浏览器要复杂一点,本篇以github上的源码为案例详细介绍如何启动iOS模拟器的app 一.clone源码 1.githu ...
- python笔记-冒泡排序【转载】
本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/python/ 前言 面试的时候经常有面试官喜欢问如何进行冒泡排序?这个问题相信能难倒一 ...
- 你不知道的 JavaScript 基础细节
语法部分 type 属性: 默认的 type 就是 javascript, 所以不必显式指定 type 为 javascript javascript 不强制在每个语句结尾加 “:” , javasc ...
- Codeforces 935E Fafa and Ancient Mathematics(表达式转树 + 树型DP)
题目链接 Codeforces Round #465 (Div. 2) Problem E 题意 给定一个表达式,然后用$P$个加号和$M$个减号填充所有的问号(保证问号个数等于$P + M$) ...
- 洛谷——P1614 爱与愁的心痛
题目背景 (本道题目隐藏了两首歌名,找找看哪~~~) <爱与愁的故事第一弹·heartache>第一章 <我为歌狂>当中伍思凯神曲<舞月光>居然没赢给萨顶顶,爱与愁 ...
- 深入JS正则先行断言
这里是 Mastering Lookahead and Lookbehind 文章的简单翻译,这篇文章是在自己搜索问题的时候stackoverflow上回答问题的人推荐的,看完觉得写得很不错.这里的简 ...
- UVA 11990 ”Dynamic“ Inversion(线段树+树状数组)
[题目链接] UVA11990 [题目大意] 给出一个数列,每次删去一个数,求一个数删去之前整个数列的逆序对数. [题解] 一开始可以用树状数组统计出现的逆序对数量 对于每个删去的数,我们可以用线段树 ...
- (转)Unity3d通过Action注册事件,回调方法
http://www.cnblogs.com/jisi5789/archive/2013/04/22/3036589.html using UnityEngine; namespace Liulala ...