Async CallBack promise fetch

时间 2019-11-12

标签 async callback promise fetch 繁體版

原文原文链接

Callback （回调函数）

在计算机程序设计中，回调函数，或简称回调（Callback 即call then back 被主函数调用运算后会返回主函数），是指经过函数参数传递到其它代码的，某一块可执行代码的引用。这一设计容许了底层代码调用在高层定义的子程序。回调函数是做为参数传递给另外一个函数的函数，而后在外部函数内调用该函数以完成某种例程或操做。javascript

使用

回调的用途十分普遍。例如，假设有一个函数，其功能为读取配置文件并由文件内容设置对应的选项。若这些选项由散列值所标记，则让这个函数接受一个回调会使得程序设计更加灵活：函数的调用者可使用所但愿的散列算法，该算法由一个将选项名转变为散列值的回调函数实现；所以，回调容许函数调用者在运行时调整原始函数的行为。php

回调的另外一种用途在于处理信号或者相似物。例如一个POSIX程序可能在收到SIGTERM信号时不肯当即终止；为了保证一切运行良好，该程序能够将清理函数注册为SIGTERM信号对应的回调。java

回调亦能够用于控制一个函数是否做为：Xlib容许自定义的谓词用于决定程序是否但愿处理特定的事件。git

Promise

Promise 对象用于表示一个异步操做的最终状态（完成或失败），以及其返回的值。es6

语法

1 new Promise( function(resolve, reject) {...} /* executor */  );

参数

executor: executor是带有 resolve 和 reject 两个参数的函数。Promise构造函数执行时当即调用 executor 函数， resolve 和 reject 两个函数做为参数传递给 executor（executor 函数在Promise构造函数返回新建对象前被调用）。 resolve 和 reject 函数被调用时，分别将promise的状态改成fulfilled（完成）或rejected（失败）。executor 内部一般会执行一些异步操做，一旦完成，能够调用resolve函数来将promise状态改为fulfilled，或者在发生错误时将它的状态改成rejected。; 若是在executor函数中抛出一个错误，那么该promise 状态为rejected。executor函数的返回值被忽略。

描述

Promise 对象是一个代理对象（代理一个值），被代理的值在Promise对象建立时多是未知的。它容许你为异步操做的成功和失败分别绑定相应的处理方法（handlers）。这让异步方法能够像同步方法那样返回值，但并非当即返回最终执行结果，而是一个能表明将来出现的结果的promise对象github

一个 Promise有如下几种状态:算法

pending: 初始状态，既不是成功，也不是失败状态。
fulfilled: 意味着操做成功完成。
rejected: 意味着操做失败。

pending 状态的 Promise 对象可能触发fulfilled 状态并传递一个值给相应的状态处理方法，也可能触发失败状态（rejected）并传递失败信息。当其中任一种状况出现时，Promise 对象的 then 方法绑定的处理方法（handlers ）就会被调用（then方法包含两个参数：onfulfilled 和 onrejected，它们都是 Function 类型。当Promise状态为fulfilled时，调用 then 的 onfulfilled 方法，当Promise状态为rejected时，调用 then 的 onrejected 方法，因此在异步操做的完成和绑定处理方法之间不存在竞争）。json

由于 Promise.prototype.then 和 Promise.prototype.catch 方法返回promise 对象，因此它们能够被链式调用。数组

不要和惰性求值混淆：有一些语言中有惰性求值和延时计算的特性，它们也被称为“promises”，例如Scheme. Javascript中的promise表明一种已经发生的状态，并且能够经过回调方法链在一块儿。若是你想要的是表达式的延时计算，考虑无参数的"箭头方法": f = () =>表达式 建立惰性求值的表达式，使用 f() 求值。promise

注意：若是一个promise对象处在fulfilled或rejected状态而不是pending状态，那么它也能够被称为settled状态。你可能也会听到一个术语resolved ，它表示promise对象处于fulfilled状态。关于promise的术语， Domenic Denicola 的 States and fates 有更多详情可供参考。

属性

Promise.length: length属性，其值老是为 1 (构造器参数的数目).
Promise.prototype: 表示 Promise 构造器的原型.

方法

Promise.all(iterable): 这个方法返回一个新的promise对象，该promise对象在iterable参数对象里全部的promise对象都成功的时候才会触发成功，一旦有任何一个iterable里面的promise对象失败则当即触发该promise对象的失败。这个新的promise对象在触发成功状态之后，会把一个包含iterable里全部promise返回值的数组做为成功回调的返回值，顺序跟iterable的顺序保持一致；若是这个新的promise对象触发了失败状态，它会把iterable里第一个触发失败的promise对象的错误信息做为它的失败错误信息。Promise.all方法常被用于处理多个promise对象的状态集合。（能够参考jQuery.when方法---译者注）
Promise.race(iterable): 当iterable参数里的任意一个子promise被成功或失败后，父promise立刻也会用子promise的成功返回值或失败详情做为参数调用父promise绑定的相应句柄，并返回该promise对象。

Promise.reject(reason): 返回一个状态为失败的Promise对象，并将给定的失败信息传递给对应的处理方法

Promise.resolve(value): 返回一个状态由给定value决定的Promise对象。若是该值是一个Promise对象，则直接返回该对象；若是该值是thenable(即，带有then方法的对象)，返回的Promise对象的最终状态由then方法执行决定；不然的话(该value为空，基本类型或者不带then方法的对象),返回的Promise对象状态为fulfilled，而且将该value传递给对应的then方法。一般而言，若是你不知道一个值是不是Promise对象，使用Promise.resolve(value) 来返回一个Promise对象,这样就能将该value以Promise对象形式使用。

Fetch

语法说明

fetch(url, options).then(function(response) { // handle HTTP response }, function(error) { // handle network error })

具体参数案例：

//兼容包 require('babel-polyfill') require('es6-promise').polyfill() import 'whatwg-fetch' fetch(url, { method: "POST", body: JSON.stringify(data), headers: { "Content-Type": "application/json" }, credentials: "same-origin" }).then(function(response) { response.status //=> number 100–599 response.statusText //=> String response.headers //=> Headers response.url //=> String response.text().then(function(responseText) { ... }) }, function(error) { error.message //=> String })

url

定义要获取的资源。这多是：

一个 USVString 字符串，包含要获取资源的 URL。
一个 Request 对象。

options（可选）

一个配置项对象，包括全部对请求的设置。可选的参数有：

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。
cache: 请求的 cache 模式: default, no-store, reload, no-cache, force-cache, 或者 only-if-cached。

response

一个 Promise，resolve 时回传 Response 对象：

属性：
- status (number) - HTTP请求结果参数，在100–599 范围
- statusText (String) - 服务器返回的状态报告
- ok (boolean) - 若是返回200表示请求成功则为true
- headers (Headers) - 返回头部信息，下面详细介绍
- url (String) - 请求的地址
方法：
- text() - 以string的形式生成请求text
- json() - 生成JSON.parse(responseText)的结果
- blob() - 生成一个Blob
- arrayBuffer() - 生成一个ArrayBuffer
- formData() - 生成格式化的数据，可用于其余的请求
其余方法：
- clone()
- Response.error()
- Response.redirect()

response.headers

has(name) (boolean) - 判断是否存在该信息头
get(name) (String) - 获取信息头的数据
getAll(name) (Array) - 获取全部头部数据
set(name, value) - 设置信息头的参数
append(name, value) - 添加header的内容
delete(name) - 删除header的信息
forEach(function(value, name){ ... }, [thisContext]) - 循环读取header的信息