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 请求封装的更多相关文章

  1. React Native 网络请求封装:使用Promise封装fetch请求

    最近公司使用React作为前端框架,使用了异步请求访问,这里做下总结: React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRe ...

  2. [RN] React Native Fetch请求设置超时

    一.实现思路 根据Promise.race的特性,我们在Promise.race里面添加两个任务,一个是正常的网络请求任务A,另外一个便是网络延时任务B,网络延时可以利用setTimeout方法实现. ...

  3. 《React Native 精解与实战》书籍连载「React Native 网络请求与列表绑定」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  4. React Native网络请求

    很多移动应用都需要从远程地址中获取数据或资源.你可能需要给某个REST API发起POST请求以提交用户数据,又或者可能仅仅需要从某个服务器上获取一些静态内容--以下就是你会用到的东西.新手可以对照这 ...

  5. react之fetch请求json数据

    Fetch下载 npm install whatwg-fetch -S Fetch请求json数据 json文件要放在public内部才能被检索到

  6. React Native 网络请求

    如下面的Code,分别介绍了GET,POST,以及使用XMLHttpRequest的Get请求. import React, { Component } from 'react'; import { ...

  7. React 使用 fetch 请求天气

    中国天气网(http://www.weather.com.cn)提供了查询天气的 API,通过传入城市 id, 可以获得当前城市的天气信息,API 相关信息如下: 规格  描述 主机地址 http:/ ...

  8. React Native之Fetch简单封装、获取网络状态

    1.Fetch的使用 fetch的使用非常简单,只需传入请求的url fetch('https://facebook.github.io/react-native/movies.json'); 当然是 ...

  9. [书籍精读]《React Native精解与实战》精读笔记分享

    写在前面 书籍介绍:本书由架构师撰写,包含ReactNative框架底层原理,以及与iOS.Android混合开发案例,精选了大量实例代码,方便读者快速学习.主要内容分为两大部分,第1部分" ...

随机推荐

  1. xmlhelper类

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Xm ...

  2. 100行代码实现最简单的基于FFMPEG+SDL的视频播放器(SDL1.x)【转】

    转自:http://blog.csdn.net/leixiaohua1020/article/details/8652605 版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[-] ...

  3. Kubernetes控制节点安装配置

    #环境安装Centos 7 Linux release 7.3.1611网络: 互通配置主机名设置各个服务器的主机名hosts#查找kubernetes支持的docker版本Kubernetes v1 ...

  4. 【原创】SSIS-执行包任务调用子包且子包读取父包变量

    背景: 有时候需要将一个个开发好的独立的ETL包串接起来形成一个独立而庞大的包,如:每家分公司都开发不同的ETL包,最后使用执行包任务来将这些分公司的包给串联起来形成一个独立而完整运行的ETL包,此时 ...

  5. 如何打造属于自己的Javascript武器库(封装方法)

    前言 代码写的久了,就会发现很多时候都是在写一些重复的东西,这个时候就应该要考虑到提高工作效率了,比如对常用方法的封装,例如日期格式化,浏览器类型判断等. 今天这篇文章我们就来看看如何封装常用的Jav ...

  6. POJ 3225.Help with Intervals-线段树(成段替换、区间异或、简单hash)

    POJ3225.Help with Intervals 这个题就是对区间的各种操作,感觉这道题写的一点意思都没有,写到后面都不想写了,而且更神奇的是,自己的编译器连结果都输不出来,但是交上就过了,也是 ...

  7. Codeforces Round #445 C. Petya and Catacombs【思维/题意】

    C. Petya and Catacombs time limit per test 1 second memory limit per test 256 megabytes input standa ...

  8. Python的Web编程[1] -> Web服务器[0] -> Web 服务器与 CGI / WSGI

    Web服务器 / Web Server 对于Web来说,需要建立一个Web服务器,必须建立一个基本的服务器和一个处理程序, 基本服务器的主要作用是,在客户端和服务器端完成必要的HTTP交互, 处理程序 ...

  9. #420 Div2 C

    #420 Div2 C 题意 不断把数加入到一个栈里,取数的时候要求按照 1~n 的顺序取数,每次取数保证数一定在栈里,如果要取的数不在栈头,可以选择对栈排序一次.问最少排序几次. 分析 只要栈头的数 ...

  10. 树链剖分【p1505】[国家集训队]旅游

    Description Ray 乐忠于旅游,这次他来到了T 城.T 城是一个水上城市,一共有 N 个景点,有些景点之间会用一座桥连接.为了方便游客到达每个景点但又为了节约成本,T 城的任意两个景点之间 ...