js fetch api
MDN
fatch
返回的对象
type string
url string
redirected boolean
status number
ok boolean
statusText string
headers object
body object
bodyUsed boolean
clone function
arrayBuffer function
blob function
formData function
json function
text function
get 和 post
get() {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
let option = {
method: 'GET',
headers: headers,
mode: 'cors',
cache: 'default'
};
let request = new Request('/get', option);
fetch(request).then(res => res.json()).then(res => console.log(res));
post() {
let headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
let option = {
method: 'POST',
headers: headers,
mode: 'cors',
cache: 'default'
};
let request = new Request('/post', option);
fetch(request).then(res => res.json()).then(res => console.log(res));
}
rxjs的ajax
rxjs.ajax.ajax.get('/get',{'content-type': 'application/json'})
.pipe(
rxjs.operators.map(res => res.response)
)
.subscribe(
v => { console.log(v) },
e => { console.log(e) },
() => { console.log('complete') }
);
rxjs.ajax.ajax.post('/post',{'content-type': 'application/x-www-form-urlencoded;charset=utf-8'})
.pipe(
rxjs.operators.map(res => res.response)
)
.subscribe(
v => { console.log(v) },
e => { console.log(e) },
() => { console.log('complete') }
);
rxjs 包装 fetch
let get$ = rxjs.from(fetch('/get', {
method: 'GET',
headers: headers
}))
get$.pipe( rxjs.operators.mergeMap(res => rxjs.from(res.json())))
.subscribe(res => console.log( res))
并发请求
let get$ = rxjs.from(fetch('/get', {
method: 'GET',
headers: headers
}))
let get1$ = rxjs.from(fetch('/get1', {
method: 'GET',
headers: headers
}))
let get2$ = rxjs.from(fetch('/get2', {
method: 'GET',
headers: headers
}))
rxjs.merge(get$, get1$, get2$)
.pipe(
rxjs.operators.mergeMap(res => rxjs.from(res.json()))
)
.subscribe(res => console.log(res), err => console.error(err))
js fetch api的更多相关文章
- (转)这个API很“迷人”——新的Fetch API
原文:https://hacks.mozilla.org/2015/03/this-api-is-so-fetching 原标题是This API is So Fetching,Fetching也可以 ...
- Fetch API & Delete & HTTP Methods
Fetch API & Delete & HTTP Methods vue https://developer.mozilla.org/en-US/docs/Web/API/Fetch ...
- 基于Promise规范的fetch API的使用
基于Promise规范的fetch API的使用 fetch的使用 作用:fetch 这个API,是专门用来发起Ajax请求的: fetch 是由原生 JS 提供的 API ,专门用来取代 XHR 这 ...
- Axios & fetch api & Promise & POST
Axios & fetch api & Promise & POST https://github.com/axios/axios https://appdividend.co ...
- fetch API 简单解读
http://f2e.souche.com/blog/fetch-api-jie-du/?utm_source=tuicool&utm_medium=referral 在我们日常的前端开发中, ...
- ES6 Fetch API HTTP请求实用指南
本次将介绍如何使用Fetch API(ES6 +)对REST API的 HTTP请求,还有一些示例提供给大家便于大家理解. 注意:所有示例均在带有箭头功能的 ES6中给出. 当前的Web /移动应用程 ...
- Fetch API与POST请求那些事
简述 相信不少前端开发童鞋与后端联调接口时,都会碰到前端明明已经传了参数,后端童鞋却说没有收到,尤其是post请求,遇到的非常多.本文以node.js作为服务端语言,借用express框架,简要分析客 ...
- js Fetch返回数据res.json()报错问题
前言 一直以来在简单的场景中经常使用fetch代替第三方请求库, fetch是JavaScript的原生函数, 简单.高效.快速.稳定.可定制等等诸多优点.一直也是用着很是舒服,直到有一天它竟然报错了 ...
- 原生JS实战:写了个一边玩游戏,一边记JS的API的游戏
本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5878913.html 本程序[一边玩游戏,一边记JS的API]是本人的个 ...
随机推荐
- Python中多进程的使用
进程:程序的一次执行(程序载入内存,系统分配资源运行).每个进程有自己的内存空间,数据栈等,进程之间可以进行通讯,但是不能共享信息. 线程:所有的线程运行在同一个进程中,共享相同的运行环境.每个独立的 ...
- mac下最简单的删除node方法是什么
sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*}
- Andorid源码 4.4 TAG
Fetching project platform/frameworks/opt/timezonepickerremote: Counting objects: 11169, doneremote: ...
- MDX Cookbook 02 - 除数为零的问题
先直接看一个例子 - WITH MEMBER [Date].[Calendar Year].[CY 2006 vs 2005 Bad] AS ], FORMAT_STRING = 'Percent' ...
- curl重写php file_get_contents
file_get_contents在连接不上的时候会提示Connection refused,有时候会带来不便:另外,curl的性能比file_get_contents高,所以用curl重写file_ ...
- H5的Video事件,控制方法,及监听
1.标签基本属性 src :视频的属性 poster:视频封面,没有播放时显示的图片preload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条width:视 ...
- [svc]HTTPS证书生成原理和部署细节
参考: http://www.barretlee.com/blog/2015/10/05/how-to-build-a-https-server/ 今天摸索了下 HTTPS 的证书生成,以及它在 Ng ...
- python工具 - 从文件名读取特定信息到excel表格
情景:文件名中包含学号和用户名,其中用户名在前学好在后,学号为2位,如harry33.txt.natasha12.txt. 要求:将多个文件名中的用户名与学号分开并保存到excle中. 代码部分: i ...
- 【Spark 深入学习 -09】Spark生态组件及Master节点HA
----本节内容------- 1.Spark背景介绍 2.Spark是什么 3.Spark有什么 4.Spark部署 4.1.Spark部署的2方面 4.2.Spark编译 4.3.Spark St ...
- linux每日命令(12):nl命令
nl命令在linux系统中用来计算文件中行号.nl 可以将输出的文件内容自动的加上行号!其默认的结果与 cat -n 有点不太一样, nl 可以将行号做比较多的显示设计,包括位数与是否自动补齐 0 等 ...