前言

对于ajax请求,我们不仅可以使用XMLHTTPrequest,还可以使用fetch

正文

promise

在使用ajax时,如果想要使得第二个ajax请求调用第一个ajax请求,就得使用在onreadystatechange中再次指定一个ajax请求,如果再想使用第三个,就得继续判断,这样越来越多,代码就会变得越来越复杂,这就被称为回调地狱

有什么方法可以解决这个问题呢?就是使用promise

promise在ES6(ECMAScript 6.0)中被统一规范,所以新版的浏览器基本都是支持promise写法的

一个标准的promise的写法是这样的

new Promise(function(resolve, reject) {
if(true) { resolve() };
if(false) { reject() };
})

promise中有三种状态,pending(等待中),resolve(已经完成,得到想要的结果),reject(已经得到,但不是想要的结果)

在promise中可以使用then方法,来处理对应的状态变化,来对应执行

,并且then的执行结果也会返回一个promise对象,所以可以进行多次then的使用

fetch

继续来看fetch

fetch('http://example.com/movies.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});

一个正常的fetch的格式是这样的,以一个url为参数,返回一个promise的responese

但是这只是一个html响应,并不是json对象,所以使用json()将其转变为json对象

fetch还可以加上第二个参数init

  • method: 请求使用的方法,如 GET、POST。

  • headers: 请求的头信息,形式为 Headers 的对象或包含 ByteString 值的对象字面量。

  • body: 请求的 body 信息:可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。

  • mode: 请求的模式,如 cors、 no-cors 或者 same-origin。

  • credentials: 请求的 credentials,如 omit、same-origin 或者 include。为了在当前域名内自动发送 cookie , 必须提供这个选项, 从 Chrome 50 开始, 这个属性也可以接受 FederatedCredential 实例或是一个 PasswordCredential 实例。

  • cache: 请求的 cache 模式: default 、 no-store 、 reload 、 no-cache 、 force-cache 或者 only-if-cached 。

  • redirect: 可用的 redirect 模式: follow (自动重定向), error (如果产生重定向将自动终止并且抛出一个错误), 或者 manual (手动处理重定向). 在Chrome中,Chrome 47之前的默认值是 follow,从 Chrome 47开始是 manual。

  • referrer: 一个 USVString 可以是 no-referrer、client或一个 URL。默认是 client。

  • referrerPolicy: Specifies the value of the referer HTTP header. May be one of no-referrer、 no-referrer-when-downgrade、 origin、 origin-when-cross-origin、 unsafe-url 。

  • integrity: 包括请求的 subresource integrity 值(例如:sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=)。

fetch请求默认是不加cookie的,除非设置credentials,credentials默认为omit,忽略的意思,也就是不带cookie;还有两个参数,same-origin,意思就是同源请求带cookie;include,表示无论跨域还是同源请求都会带cookie

返回的response

  • status —— 整数(默认值为200) 为response的状态码.
  • statusText —— 字符串(默认值为"OK"),该值与HTTP状态码消息对应.
  • ok —— 如上所示, 该属性是来检查response的状态是否在200-299(包括200,299)这个范围内.该属性返回一个Boolean值
  • headers —— 包含此Response所关联的Headers 对象.
  • body —— 包含响应或请求的正文

body中常用的方法

  • arrayBuffer()

    使用一个buffer数组来读取 Response流中的数据,并将bodyUsed状态改为已使用。
  • blob()

    使用一个Blob对象来读取 Response流中的数据,并将bodyUsed状态改为已使用。
  • formData()

    使用一个 FormData 对象来读取 Response流中的数据,并将bodyUsed状态改为已使用。
  • json()

    使用一个 JSON 对象来读取 Response流中的数据,并将bodyUsed状态改为已使用。
  • text()

    使用一个USVString (文本) 对象来读取 Response流中的数据,并将bodyUsed状态改为已使用。

一个示例

var myImage = document.querySelector('img');

var myHeaders = new Headers();
myHeaders.append('Content-Type', 'image/jpeg'); var myInit = { method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default' }; var myRequest = new Request('flowers.jpg'); fetch(myRequest,myInit).then(function(response) {
...
});

参考链接

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345008539155e93fc16046d4bb7854943814c4f9dc2000

https://www.jianshu.com/p/fe5f173276bd

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

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

https://www.jianshu.com/p/35123b048e5e

fetch初步了解的更多相关文章

  1. [简记] fetch API 的初步使用

    var myHeaders = new Headers(); myHeaders.append('Content-Type', 'application/x-www-form-urlencoded; ...

  2. nVIDIA SDK White Paper ----Vertex Texture Fetch Water

    http://blog.csdn.net/soilwork/article/details/713842 nVIDIA SDK White Paper ----Vertex Texture Fetch ...

  3. git初步使用

    git初步使用 主要目的:使用代码控制工具,练习使用git 1.创建新项目 网址如下: https://github.com/kellyseeme?tab=repositories 注意每个人使用的名 ...

  4. Git使用总结 Asp.net生命周期与Http协议 托管代码与非托管代码的区别 通过IEnumerable接口遍历数据 依赖注入与控制反转 C#多线程——优先级 AutoFac容器初步 C#特性详解 C#特性详解 WPF 可触摸移动的ScrollViewer控件 .NET(C#)能开发出什么样的APP?盘点那些通过Smobiler开发的移动应用

    一,原理 首先,我们要明白Git是什么,它是一个管理工具或软件,用来管理什么的呢?当然是在软件开发过程中管理软件或者文件的不同版本的工具,一些作家也可以用这个管理自己创作的文本文件,由Linus开发的 ...

  5. fetch和XMLHttpRequest

    fetch和XMLHttpRequest 如果看网上的fetch教程,会首先对比XMLHttpRequest和fetch的优劣,然后引出一堆看了很快会忘记的内容(本人记性不好).因此,我写一篇关于fe ...

  6. 使用Intellij idea新建Java Web项目(servlet) 原理及初步使用

    准备 JDK       (配置JDK_HOME\bin   和 CLASSPATH)   注:JDK8下载已经需要注册了,请使用JDK11(现在是官方长期支持的版本)     对于我们新手来说,JD ...

  7. JavaScript fetch接口

    JavaScript fetch接口 如果看网上的fetch教程,会首先对比XMLHttpRequest和fetch的优劣,然后引出一堆看了很快会忘记的内容(本人记性不好).因此,我写一篇关于fetc ...

  8. JavaScript面向对象初步认识

    一.面向对象初步认识 1.什么是对象? 一句话解释: 万物皆对象 对象是有属性的:用{ }来写入! 2.对象的应用(接口) json 接口简单的说就是后台提供给前端提供数据的,让我们进行渲染! 请求接 ...

  9. 初步认识微前端(single-spa 和 qiankun)

    初步认识微前端 微前端是什么 现在的前端应用,功能.交互日益复杂,若只由一个团队负责,随着时间的推进,会越来越庞大,愈发难以维护. 微前端这个名词,第一次提出是在2016年底.它将微服务(将单一应用程 ...

随机推荐

  1. [技巧篇]10.那些年我们一起优化过的MyEclipse8.6

    这里里面是针对于四海的给位学生预留的视频,请自行下载,我希望对大家有所帮助 我这里使用了百度网盘,这里的东西还是比较多的!如果喜欢请关注我,当好胖先生的粉丝 链接:http://pan.baidu.c ...

  2. [洛谷P2571] [SCOI2010]传送带

    题目描述 在一个2维平面上有两条传送带,每一条传送带可以看成是一条线段.两条传送带分别为线段AB和线段CD.lxhgww在AB上的移动速度为P,在CD上的移动速度为Q,在平面上的移动速度R.现在lxh ...

  3. [洛谷P3628] [APIO2010]特别行动队

    洛谷题目链接:[APIO2010]特别行动队 题目描述 你有一支由 n 名预备役士兵组成的部队,士兵从 1 到 \(n\) 编号,要将他们拆分 成若干特别行动队调入战场.出于默契的考虑,同一支特别行动 ...

  4. 【BZOJ4816】【SDOI2017】数字表格 [莫比乌斯反演]

    数字表格 Time Limit: 50 Sec  Memory Limit: 128 MB[Submit][Status][Discuss] Description Doris刚刚学习了fibonac ...

  5. UOJ#31 【UR #2】猪猪侠再战括号序列

    传送门http://uoj.ac/problem/31 大家好我是来自百度贴吧的_叫我猪猪侠,英文名叫_CallMeGGBond. 我不曾上过大学,但这不影响我对离散数学.复杂性分析等领域的兴趣:尤其 ...

  6. 基本控件文档-UIKit结构图---iOS-Apple苹果官方文档翻译

    本系列所有开发文档翻译链接地址:iOS7开发-Apple苹果iPhone开发Xcode官方文档翻译PDF下载地址  UIKit结构图 //转载请注明出处--本文永久链接:http://www.cnbl ...

  7. Winform MD5

    1:MD5 http://www.cmd5.com/ 字节数组----字符串 //将字节数组中每个元素按照指定的编码格式解析成字符串//直接将数组ToString()//将字节数组中的每个元素ToSt ...

  8. metasploit后门维持技术

    在meterpreter中执行:run metsvc -A 如此以后便会自动在服务器当中多生成一个meterpreter的服务,并且是开机自动启动.所以二次如果要利用直接: use exploit/m ...

  9. python中multiprocessing模块

    multiprocess模块那来干嘛的? 答:利用multiprocessing可以在主进程中创建子进程.Threading是多线程,multiprocessing是多进程. #该模块和Threadi ...

  10. 2015多校第7场 HDU 5378 Leader in Tree Land 概率DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5378 题意:一棵n个节点的树.对其节点进行标号(1~n).求恰好存在k个节点的标号是其节点所在子树的最 ...