Async CallBack promise fetch
Callback (回调函数)
在计算机程序设计中,回调函数,或简称回调(Callback 即call then back 被主函数调用运算后会返回主函数),是指通过函数参数传递到其它代码的,某一块可执行代码的引用。这一设计允许了底层代码调用在高层定义的子程序。回调函数是作为参数传递给另一个函数的函数,然后在外部函数内调用该函数以完成某种例程或操作。
使用
回调的用途十分广泛。例如,假设有一个函数,其功能为读取配置文件并由文件内容设置对应的选项。若这些选项由散列值所标记,则让这个函数接受一个回调会使得程序设计更加灵活:函数的调用者可以使用所希望的散列算法,该算法由一个将选项名转变为散列值的回调函数实现;因此,回调允许函数调用者在运行时调整原始函数的行为。
回调的另一种用途在于处理信号或者类似物。例如一个POSIX程序可能在收到SIGTERM信号时不愿立即终止;为了保证一切运行良好,该程序可以将清理函数注册为SIGTERM信号对应的回调。
回调亦可以用于控制一个函数是否作为:Xlib允许自定义的谓词用于决定程序是否希望处理特定的事件。
Promise
Promise 对象用于表示一个异步操作的最终状态(完成或失败),以及其返回的值。
语法
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 对象, 所以它们可以被链式调用。Promise.prototype.catch

不要和惰性求值混淆: 有一些语言中有惰性求值和延时计算的特性,它们也被称为“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: 请求使用的方法,如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表示请求成功则为trueheaders (Headers)- 返回头部信息,下面详细介绍url (String)- 请求的地址
方法:
text()- 以string的形式生成请求textjson()- 生成JSON.parse(responseText)的结果blob()- 生成一个BlobarrayBuffer()- 生成一个ArrayBufferformData()- 生成格式化的数据,可用于其他的请求
其他方法:
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的信息
Async CallBack promise fetch的更多相关文章
- Callback, Promise和Async/Await的对比
Callback, Promise和Async/Await的对比 Callback Hell getData1(function (data1) { console.log('我得到data1了') ...
- 一个例子读懂 JS 异步编程: Callback / Promise / Generator / Async
JS异步编程实践理解 回顾JS异步编程方法的发展,主要有以下几种方式: Callback Promise Generator Async 需求 显示购物车商品列表的页面,用户可以勾选想要删除商品(单选 ...
- 理解koa2 之 async + await + promise
koa是下一代的Node.js web框架. 我们首先使用koa来实现一个简单的hello world吧!假如目前的项目结构如下: ### 目录结构如下: koa-demo1 # 工程名 | |--- ...
- Async callback to awaitable Task<> z
http://blog.tedd.no/2013/09/13/async-callback-to-awaitable-task/ The Async-Await feature in .Net is ...
- 【JavaScript】 使用Async 和 Promise 完美解决回调地狱
很久以前就学习过Async和Promise,但总是一知半解的. 今天在写NodeJS的时候,发现好多第三方库使用回调,这样在实际操作中会出现多重回调,这就是传说中的JS回调地狱. 举个例子 有一个方法 ...
- async await promise 执行时序
先用一个例子来说明async await promise的执行顺序 console.log('start'); async function test(){ console.log('111'); a ...
- js中异步方案比较完整版(callback,promise,generator,async)
JS 异步已经告一段落了,这里来一波小总结 1. 回调函数(callback) setTimeout(() => { // callback 函数体 }, 1000) 缺点:回调地狱,不能用 t ...
- Callback Promise Generator Async-Await 和异常处理的演进
根据笔者的项目经验,本文讲解了从函数回调,到 es7 规范的异常处理方式.异常处理的优雅性随着规范的进步越来越高,不要害怕使用 try catch,不能回避异常处理. 我们需要一个健全的架构捕获所有同 ...
- async await promise
async 异步函数,以后可能会用得很广. 1.箭头函数: 没有{ }时不写return 也有返回值 2.Promise : 异步神器,很多异步api都是基于Promise 3.new Promise ...
随机推荐
- Http 状态码:
消息 100 Continue 101 Switching Protocols 102 Processing 成功 200 OK 201 Created 202 Accepted 203 Non-Au ...
- 实验十一 团队项目设计完善&编码测试
任务一: 根据OOD详细设计工作要点,修改完善团队项目系统设计说明书和详细设计说明,将完善后内容以<XX团队项目软件设计方案>为名发布在团队博客中,博文中要突出对完善内容的陈述说明,修改部 ...
- 【安卓基础】ImageView与EditText联动实现隐藏与显示密码
项目中经常会有这样的需求,在密码输入框的右边有一个小图标,点击就切换显示和隐藏密码. 其实这里需求实现起来是比较容易的,主要考虑是复用问题,因为登陆.注册.修改密码界面都会有这样的情景,如果每个界面都 ...
- trueStudio笔记
1.C标准的选择 可以在项目->属性->C/C++ Build->Setting->Tool Setting->C Compiler->General中选择使用不同 ...
- Confluence 6 从 WIKI 标记整合到基于 XHTML 的存储格式
如果你现在正在将 Confluence 从一个老的版本升级到 Confluence 4.0 或者更新的版本 (例如从 Confluence 3.5.x 或者更老的版本),在升级的过程中一个内容整合过程 ...
- shift and算法
1. CF 914F Substrings in a String 大意: 给定一个串s, q个询问, (1)单点修改, (2)询问[l,r]范围内串y的出现次数. shift and算法板子题 #p ...
- Matlab-6:解非线性方程组newton迭代法
函数文件: function x=newton_Iterative_method(f,n,Initial) x0=Initial; tol=1e-11; x1=x0-Jacobian(f,n,x0)\ ...
- 解决移动端真机不能下拉滚动bug
在近期的移动端开发中,发现浏览器中调试可以正常滚动,而在真机中却不能滚动了,这是为什么呢??? 总结了一下主要有一下两方面:css的设置和js的设置 1.之前有设置css的原因,下面分先说css的问题 ...
- 微信小程序<swiper-item>标签中传入多个数组型数据的方法(小程序交流群:604788754)
在<swiper-item>中用for循环传入多个成对不同数据时的实现方法. 效果如下: 遍历实现方法:wxss省略: wxml中代码: <!--导航部分轮播图--> < ...
- JavaScript Basic Memo
1.this 的指向 1).由 new 调用?绑定到新创建的对象. 2). 由 call 或者 apply(或者 bind)调用?绑定到指定的对象. 3). 由上下文对象调用?绑定到那个上下文对象. ...