Async CallBack promise fetch

Callback (回调函数)

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

使用

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

回调的另一种用途在于处理信号或者类似物。例如一个POSIX程序可能在收到SIGTERM信号时不愿立即终止;为了保证一切运行良好,该程序可以将清理函数注册为SIGTERM信号对应的回调。

回调亦可以用于控制一个函数是否作为:Xlib允许自定义的谓词用于决定程序是否希望处理特定的事件。

Promise

Promise 对象用于表示一个异步操作的最终状态(完成或失败),以及其返回的值。

语法

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对象

一个 Promise有以下几种状态:

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

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

因为 Promise.prototype.then 和  Promise.prototype.catch 方法返回promise 对象, 所以它们可以被链式调用。

不要和惰性求值混淆: 有一些语言中有惰性求值和延时计算的特性,它们也被称为“promises”,例如Scheme. Javascript中的promise代表一种已经发生的状态, 而且可以通过回调方法链在一起。 如果你想要的是表达式的延时计算,考虑无参数的"箭头方法":  f = () =>表达式 创建惰性求值的表达式,使用 f() 求值。

注意: 如果一个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: 请求使用的方法,如 GETPOST

  • headers: 请求的头信息,形式为 Headers 对象或 ByteString

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

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

  • credentials: 请求的 credentials,如 omitsame-origin 或者 include

  • cache: 请求的 cache 模式: defaultno-storereloadno-cacheforce-cache, 或者 only-if-cached

response

一个 Promiseresolve 时回传 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的信息

原文地址:https://www.cnblogs.com/BigWatermelon/p/10052789.html