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. Bootstrap插件-collapse

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  2. 无法定位程序输入点到_ftol2于动态链接库msvcrt.dll的错误的解决

    作者:朱金灿 来源:http://blog.csdn.net/clever101 今天同事在Windows XP系统上运行程序遇到这样一个错误: 我试了一下,在Win7上运行则没有这个错误.只是程序运 ...

  3. 云中(云厂商)抗DDoS究竟哪家强?

    随着云计算的兴起,大量资源触手可得,这让DDoS攻击的成本断崖般下降,而人们对于互联网服务的可靠性要求又在不断加强,这就使得DDoS攻击所造成的破坏力与日俱增.面对日趋严重的网络安全形势,企业传统的见 ...

  4. DB2数据库备份还原

    恢复及备份NC DB2数据库步 一. 安装DB2数据库 解压db2v9.5ins.rar安装,在写此文档时客户一般用的是9.5: 注意不要将db2安装到系统盘: 二. Windows版本 1.数据库备 ...

  5. C++编写双向链表

    创建双向链表类,该类有默认构造函数.类的拷贝函数.类的.实现链表添加数据.升序排序.查找链表中某个节点及删除链表中某个节点的操作 代码实现: #include<iostream> #inc ...

  6. a low memory warning should only destroy the layer’s bitmap

    https://stablekernel.com/view-controller-in-ios-6/ Some of you may have noticed that your view contr ...

  7. SEO人士一定要了解的搜索引擎惩罚原则

       SEO人士一定要了解的搜索引擎惩罚原则 SEO 的人一般都知道SEO分为白帽,黑帽,甚至还有灰帽.简单说,如果你熟读过谷歌网站质量指南,就可以了解,符合搜索引擎质量规范并且符合用户体验的SEO ...

  8. 2018.6.7. 云服务器Centos系统使用yum或者rpm安装包时出现问题,安装时报出错误:

    当我向终端输入 sudo yum groupinstall chinese-support 语言安装包的时候显示下面的错误 error: rpmdb: BDB0113 Thread/process 3 ...

  9. python_78_软件目录结构规范

    一定要看http://www.cnblogs.com/alex3714/articles/5765046.html #print(__file__)#打印的是文件的相对路径 import os pri ...

  10. github不能加载css、js解决办法

    很奇怪,上午在公司还能正常访问github,晚点访问却有问题,页面样式明显错乱. 在FireFox下用F12开发者工具一看,有2条css和2条js 404 了,猜想应该是github的DNS被GFW污 ...