fetch api出来很多年了 ,由于兼容性问题之前一直没在项目中用到,最近做的项目只需兼容IE9+,把fetch引入了进来。目前用起来感觉挺好的,简洁。

fetch 返回值是promise对象,对于不支持promise的需要引入promise-polyfill: https://www.npmjs.com/package/es6-promise-polyfill 。 对于不支持fetch的需要引入fetch-polyfill :https://github.com/github/fetch

由于fetch不支持jsonp, 如果需要使用jsonp, 可以引入fetch-jsonp :https://github.com/camsong/fetch-jsonp, 其使用方式和fetch基本一样。

//最简单的使用方式:fetch(url, [options]), 对于get请求,参数需添加到url后面
fetch(url).then((response) => response.json()).then((response) => { console.log(response)})

fetch请求提供了非常灵活的配置

1. 直接在options配置

options.method //GET, POST, PUT, DELETE, HEAD
options.headers =
{
// 'Access-Control-Allow-Origin': '*',
// 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' //application/json
// 'Content-Type': 'multipart/formdata; charset=UTF-8' //application/json
},
options.credentials=include //允许请求发送cookie
options.body = new FormData(form)  //post请求
options.body = JSON.stringify(params) //post请求

2. 使用 new Headers()创建请求头

let myHeaders = new Headers();

myHeaders.append('Content-Type', 'text/xml');

myHeaders.append('Custom-Header', 'CustomVal');

myHeaders.has('Content-Type');//true

myHeaders.get('Content-Type');//text/xml

myHeaders.set('Content-Type', 'application/json');

myHeaders.delete('Custom-Header');

//或直接以参数的形式创建

let myHeaders = new Headers({
'Content-Type': 'application/json'
});

创建一个Request 对象来包装请求头:

var myRequest = new Request(url,{
headers:new Headers({ })
}); fetch(myRequest).then((response)=>response.json)

可以发现fetch和Request参数基本一致,可以通过 Request() 和 Response() 的构造函数直接创建请求和响应,但是不建议这么做。他们应该被用于创建其他 API 的结果(mdn上说的)

3. 响应

Response 代表响应,fetch 的then 方法接受一个Response实例

response提高了很多属性和方法,https://developer.mozilla.org/zh-CN/docs/Web/API/Response

其中经常会用到response.json() /response.text() ,返回一个promise对象。

let fetchFn = function (opts) {
let options = {
url : '', // 路径
method : 'GET',
params: { },
headers : {
'Access-Control-Allow-Origin': '*',
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
},
success(){},
error(){}
};
options = extend(options, opts);
let fetchParams = {
method: options.method,
headers: options.headers,
credentials : 'include' //允许发送cookie
}
if (options.method == 'GET'){
options.url = toUrlParams(options.url, options.params); // 将参数拼接在url后面
}else{
fetchParams.body = JSON.stringify(options.params);
if (options.form){
fetchParams.body = new FormData(options.form)
}
}
fetch(opts.url, fetchParams).then(response => response.json()).then(result => {
if (result.code == 0){
options.success(result);
}else{
options.error(result);
}
}).catch(e =>{
console.log(' failed:', e)
});
}

参考文档:

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API

http://www.cnblogs.com/hsprout/p/5504053.html

http://web.jobbole.com/84924/

https://segmentfault.com/a/1190000003810652

fetch 使用记录的更多相关文章

  1. Rest风格WEB服务(Rest Style Web Service)的真相

    http://blog.csdn.net/jia20003/article/details/8365585 Rest风格WEB服务(Rest Style Web Service)的真相 分类: J2E ...

  2. zabbix统一脚本监控方式

    几周的zabbix使用之后几点心得,暂时记在这儿 简单命令监控,直接配置Userparameter参数,以应用来分类conf文件,将不同应用的配置写在不同的conf文件里,并将之放到统一的配置引入目录 ...

  3. MySQL存储过程学习笔记

    MySQL在5.0以前并不支持存储过程,这使得MySQL在应用上大打折扣.MySQL 5.0终于开始支持存储过程了. MySQL的关键字大小写通用.该学习笔记对关键字使用大写:变量名,表名使用小写. ...

  4. Pro*C介绍

    内嵌SQL 概要 Pro*C语法 SQL 预处理指令 语句标号 宿主变量 基础 指针 结构 数组 指示器变量 数据类型同等化 动态SQL 事务 错误处理 SQLCA WHENEVER语句 Demo程序 ...

  5. SublimeText3 编辑器使用小结

    1. 快捷键: Command + shift + D : 复制当前行 Command + shift + K : 删除当前行 Command + J : 合并一行 Command + Enter : ...

  6. 何时会发生db file sequential read等待事件?

    很多网友对系统内频繁发生的db file sequential read等待事件存有疑问,那么到底在那些场景中会触发该单块读等待事件呢? 在我之前写的一篇博文<SQL调优:Clustering ...

  7. MySQL 04

    目录 python操作mysql mysql sql注入问题 问题描述 解决办法 增/删/改 查询 索引 基本概念 索引的原理 mysql索引种类 普通索引 唯一索引 联合索引 创建索引 正确使用索引 ...

  8. SQLAlchemy(4)

    结果查询 上节课使用query从数据库中查询到了结果,但是query返回的对象是直接可用的吗? 首先导入模块 from connect import session from user_modules ...

  9. PL/SQL编程急速上手

    结构化查询语言(SQL)是第四代编程语言的典型,这种命令式的语言更像一种指令,使用它,你只需要告诉计算机“做什么”,而不用告诉计算机“怎么做”.第四代编程语言普遍具有简单.易学.能更快的投入生产等优点 ...

随机推荐

  1. 美团Java面试154道题

    Java集合22题 ArrayList 和 Vector 的区别.ArrayList与Vector区别 说说 ArrayList,Vector, LinkedList 的存储性能和特性.ArrayLi ...

  2. eCharts图表(polar极坐标图)

    极坐标图 HTML: <div id="eChart"></div> css: #eChart{ width:500px; height:500px; } ...

  3. 关于在C++中调用system函数

    先看看下面的这一段程序: #include <iostream> #include <cstdlib> int main(int argc, char* argv[]) { s ...

  4. Remote System Explorer Operation在eclipse后台一直跑 解决办法

    在用eclipse开发时,经常遇到卡死的情况,其中一种就是右下角出现:“Remote System Explorer Operation”,解决方案如下: 第一步:Eclipse -> Pref ...

  5. Android 常用RGB值及名称

    Android   常用RGB值及名称 颜  色 RGB值 英文名 中文名 #FFB6C1 LightPink 浅粉红 #FFC0CB Pink 粉红 #DC143C Crimson 深红/猩红 #F ...

  6. sql server 2012安装程序图

    重点:下面的安装步骤都在断网环境下安装的 因为我想查看联网跟没有联网SQL2012会不会下载并安装.net2.0 和.net3.5和.net4和SP1补丁包 我的环境: 没有集成SP1补丁包的安装包大 ...

  7. java Vamei快速教程22 内存管理和垃圾回收

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 整个教程中已经不时的出现一些内存管理和垃圾回收的相关知识.这里进行一个小小的总结. ...

  8. oc语言特性

    It’s a superset of the C programming language and provides object-oriented capabilities and a dynami ...

  9. Java中ArrayList的对象引用问题

    前言事件起因是由于同事使用ArrayList的带参构造方法进行ArrayList对象复制,修改新的ArrayList对象中的元素(对象)的成员变量时也会修改原ArrayList中的元素(对象)的成员变 ...

  10. CUDA:Supercomputing for the Masses (用于大量数据的超级计算)-第九节

    原文链接 第九节:使用CUDA拓展高等级语言 Rob Farber 是西北太平洋国家实验室(Pacific Northwest National Laboratory)的高级科研人员.他在多个国家级的 ...