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的更多相关文章

  1. (转)这个API很“迷人”——新的Fetch API

    原文:https://hacks.mozilla.org/2015/03/this-api-is-so-fetching 原标题是This API is So Fetching,Fetching也可以 ...

  2. Fetch API & Delete & HTTP Methods

    Fetch API & Delete & HTTP Methods vue https://developer.mozilla.org/en-US/docs/Web/API/Fetch ...

  3. 基于Promise规范的fetch API的使用

    基于Promise规范的fetch API的使用 fetch的使用 作用:fetch 这个API,是专门用来发起Ajax请求的: fetch 是由原生 JS 提供的 API ,专门用来取代 XHR 这 ...

  4. Axios & fetch api & Promise & POST

    Axios & fetch api & Promise & POST https://github.com/axios/axios https://appdividend.co ...

  5. fetch API 简单解读

    http://f2e.souche.com/blog/fetch-api-jie-du/?utm_source=tuicool&utm_medium=referral 在我们日常的前端开发中, ...

  6. ES6 Fetch API HTTP请求实用指南

    本次将介绍如何使用Fetch API(ES6 +)对REST API的 HTTP请求,还有一些示例提供给大家便于大家理解. 注意:所有示例均在带有箭头功能的 ES6中给出. 当前的Web /移动应用程 ...

  7. Fetch API与POST请求那些事

    简述 相信不少前端开发童鞋与后端联调接口时,都会碰到前端明明已经传了参数,后端童鞋却说没有收到,尤其是post请求,遇到的非常多.本文以node.js作为服务端语言,借用express框架,简要分析客 ...

  8. js Fetch返回数据res.json()报错问题

    前言 一直以来在简单的场景中经常使用fetch代替第三方请求库, fetch是JavaScript的原生函数, 简单.高效.快速.稳定.可定制等等诸多优点.一直也是用着很是舒服,直到有一天它竟然报错了 ...

  9. 原生JS实战:写了个一边玩游戏,一边记JS的API的游戏

    本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5878913.html 本程序[一边玩游戏,一边记JS的API]是本人的个 ...

随机推荐

  1. vscode下调试caffe源码

    caffe目录: ├── build -> .build_release // make生成目录,生成各种可执行bin文件,直接调用入口: ├── cmake ├── CMakeLists.tx ...

  2. eclipse spring 配置文件xml校验时,xsd报错

      1.情景展示 eclipse中,spring配置文件报错信息如下: 配置文件头部引用信息为: <?xml version="1.0" encoding="UTF ...

  3. Elasticsearch 开启

    一.知识补充,摘抄,总结 1. Elasticsearch ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.E ...

  4. 【PHP】php生成一个不重复的数字(订单号、会员号)

    1.目的:利用php的do .. while 生成一个不重复的字符串或者数组,比如(订单号.会员号) 2.不废话,代码来: $repeat_order = array(); do{ $ordersn ...

  5. iOS 创建一个App目录结构

    Class:存放的是App中所有的模块功能 Base:存放一些基类,比如BaseViewController,BaseModel等,共性直接在基类中去修改 Vendor:三方,因为我的项目中使用coc ...

  6. 转 qInstallMsgHandler实现日志输出

    #include <QtDebug> #include <QFile> #include <QTextStream> #define _TIME_ qPrintab ...

  7. ERROR: Field * doesn't have a default value

    ERROR: Field 'status' doesn't have a default value 今天做项目,在插入数据时出现了这个从没遇到的异常,看了98%的异常分析都是针对组件id出现了类似的 ...

  8. struts2:多业务方法的处理(动态调用,DMI)

    struts2支持调用指定Action类中某一个业务方法.如果没有指定,则调用execute方法. 1. 第一种实现方式,通过URL叹号参数 1.1 创建Action类,带多个方法 package c ...

  9. 物联网架构成长之路(8)-EMQ-Hook了解、连接Kafka发送消息

    1. 前言 按照我自己设计的物联网框架,对于MQTT集群中的所有消息,是要持久化到磁盘的,这里采用一个消息队列中间件Kafka作为数据缓冲,缓冲结果存到数据仓库中,以供后续作为数据分析.由于MQTT集 ...

  10. GNU make使用(二)

    [时间:2017-06] [状态:Open] [关键词:makefile,gcc,编译,shell命令,目标文件] 0 引言及目标 之前使用Makefile都是把源文件和目标文件放到同一个目录编译.近 ...