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]是本人的个 ...
随机推荐
- H5使用Swiper过程中遇到的滑动冲突
一.问题 (1)PC端可以鼠标可以拖动中间的轮子让页面上下滑动,点击左键按着也是拖不动 (2)手机端浏览H5手指不能滑动页面,导致很多页面下面的文字看不到 二.解决问题 1.下面分先说css的问题,主 ...
- 使用JDBC在MySQL数据库中快速批量插入数据
使用JDBC连接MySQL数据库进行数据插入的时候,特别是大批量数据连续插入(10W+),如何提高效率呢? 在JDBC编程接口中Statement 有两个方法特别值得注意: void addBatch ...
- Spring ActiveMQ 整合(三): 确认机制ACK(收到消息后,应该有一个回应也就是确认答复)
https://blog.csdn.net/dly1580854879/article/details/68490197
- JSR-303 Bean Validation 介绍及 Spring MVC 服务端验证最佳实践
任何时候,当要处理一个应用程序的业务逻辑,数据校验是你必须要考虑和面对的事情. 应用程序必须通过某种手段来确保输入参数在上下文来说是正确的. 分层的应用在很多时候,同样的数据验证逻辑会出现在不同的层, ...
- TF_Server gRPC failed, call return code:8:Received message larger than max (45129801 vs. 4194304)
tensorflow_serving 遇到错误:gRPC failed, call return code:8:Received message larger than max (45129801 v ...
- Android——TabHost(标签容器)相关知识总结贴
android 2.3 r1 中文 api (58) —— TabHost http://www.apkbus.com/android-18911-1-1.html android中文api (5 ...
- 学习下知然网友写的taskqueue
博主在他的博客里对taskqueue的各种使用情况和使用方法都介绍的很清楚:http://www.cnblogs.com/zhiranok/archive/2013/01/14/task_queue. ...
- mysql中TIMESTAMP设置默认时间为当前时间
在我们保存数据进入到数据库中时多半会使用像php之类的脚本来获取一个时间保存到mysql中,其实在mysql可以直接使用TIMESTAMP 数据类型来实现默认类型了,下面一起来看看. 很多时候,为 ...
- hibernate之关于一对多单向关联映射
[hibernate]之关于一对多单向关联映射 基于外键的一对多关联映射! 一对多,Group(组)对于Person(人),一个组能够有多个人!ok? Hibernate主要有两种配置方法.一种是An ...
- 【spark 深入学习 03】Spark RDD的蛮荒世界
RDD真的是一个很晦涩的词汇,他就是伯克利大学的博士们在论文中提出的一个概念,很抽象,很难懂:但是这是spark的核心概念,因此有必要spark rdd的知识点,用最简单.浅显易懂的词汇描述.不想用学 ...