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. 可视化工具Navicat的使用/pymysql模块的使用

    一.可视化工具Navicat的使用 1.官网下载:http://www.navicat.com/en/products/navicat-for-mysql 2.网盘下载:http://pan.baid ...

  2. strlen()与mb_strlen()的作用分别是什么

    strlen和mb_strlen都是用于截取字符串的,其中strlen只针对单字节编码字符 如果是多字节编码字符 如gbk和utf8 使用strlen会出现乱码 此时可以使用mb_strlen(),专 ...

  3. Eucalyptus-利用镜像启动一个Centos实例

    1.前言 使用kvm制作Eucalyptus镜像(Centos6.5为例)——http://www.cnblogs.com/gis-luq/p/3990795.html 上一篇我们讲述了如何利用kvm ...

  4. SpringEL和资源调用

    Spring EL-Spring表达式语言,支持在xml和注解中使用表达式,类似于JSP的EL表达式语言. Spring开发中经常涉及调用各种资源的情况,包含普通文件.网址.配置文件.系统环境变量等, ...

  5. php编译安装过程中遇到问题

    编译安装PHP时遇到的问题 问题1: configure: error: xml2-config not found. Please check your libxml2 installation. ...

  6. [Jira]启动报错无法删除缓存文件felix-cache的解决方法

    背景: 由于公司机房停电,jira服务器在停电期间需要关机处理,然而待重启启动服务时,jira出现报错,页面报错信息如下: Unable to clean the cache directory: / ...

  7. 新增自定义聚合函数StrJoin

    1.添加程序集Microsoft.SqlServer.Types CREATE ASSEMBLY [Microsoft.SqlServer.Types] AUTHORIZATION [sys] FRO ...

  8. Android(java)学习笔记93:为什么局部内部类只能访问外部类中的 final型的常量

    为什么匿名内部类参数必须为final类型: 1)  从程序设计语言的理论上:局部内部类(即:定义在方法中的内部类),由于本身就是在方法内部(可出现在形式参数定义处或者方法体处),因而访问方法中的局部变 ...

  9. 选中ListBox控件中的全部项

    实现效果: 知识运用: ListBox控件的SelectedItems属性 //获取ListBox控件中被选中数据项的集合 public ListBox.SelectedObjectCollectio ...

  10. python_输入一个数,判断是否是素数

    while True: n=int(input('n=')) for i in range(2,n): if n%i==0: print("n is not 素数") break ...