JS Promise
🧑‍💻

JS Promise

Tag
JS
Last Edited Time
Dec 20, 2021 08:53 PM
Created
Jun 3, 2021 01:01 PM

Promise 的含义

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。
所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。
Promise对象有以下两个特点。
(1)对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。
(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pending变为rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为 resolved(已定型)。如果改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。
作者:neromous
链接:https://www.jianshu.com/p/1a15c347b718
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 
 
 
 
下面代码创造了一个Promise实例。
const promise=newPromise(function(resolve,reject){if(){resolve(value);}else{reject(error);}});
Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数,由 JavaScript 引擎提供,不用自己部署。
resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。
Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。
promise.then(function(value){},function(error){});
then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用,第二个回调函数是Promise对象的状态变为rejected时调用。其中,第二个函数是可选的,不一定要提供。这两个函数都接受Promise对象传出的值作为参数。
下面是一个Promise对象的简单例子。
functiontimeout(ms){returnnewPromise((resolve,reject)=>{setTimeout(resolve,ms,'done');});}timeout(100).then((value)=>{console.log(value);});
上面代码中,timeout方法返回一个Promise实例,表示一段时间以后才会发生的结果。过了指定的时间(ms参数)以后,Promise实例的状态变为resolved,就会触发then方法绑定的回调函数。
Promise 新建后就会立即执行。
letpromise=newPromise(function(resolve,reject){console.log('Promise');resolve();});promise.then(function(){console.log('resolved.');});console.log('Hi!');
上面代码中,Promise 新建后立即执行,所以首先输出的是Promise。然后,then方法指定的回调函数,将在当前脚本所有同步任务执行完才会执行,所以resolved最后输出。
作者:neromous
链接:https://www.jianshu.com/p/1a15c347b718
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 
异步Promise及Async/Await可能最完整入门攻略
此文只介绍Async/Await与Promise基础知识与实际用到注意的问题,将通过很多代码实例进行说明,两个实例代码是setDelay和setDelaySecond。 我们都知道已经有了 Promise 的解决方案了,为什么还要ES7提出新的Async/Await标准呢? 答案其实也显而易见: Promise虽然跳出了异步嵌套的怪圈,用链式表达更加清晰,但是我们也发现如果有大量的异步请求的时候,流程复杂的情况下,会发现充满了屏幕的 then ,看起来非常吃力,而ES7的Async/Await的出现就是为了解决这种复杂的情况。 首先,我们必须了解 Promise 。 什么是Promise,很多人应该都知道基础概念?直接看下面的代码( 全文的例子都是基于setDelaySecond和setDelay两个函数,请务必记住 ): const setDelay = (millisecond) => { return new Promise((resolve, reject)=>{ if (typeof millisecond != 'number') reject(new Error('参数必须是number类型')); setTimeout(()=> { resolve(`我延迟了${millisecond}毫秒后输出的`) }, millisecond) }) } 我们把一个Promise封装在一个函数里面同时返回了一个Promise,这样比较规范。 可以看到定义的Promise有两个参数, resolve和 reject 。 resolve:将异步的执行从pending(请求)变成了resolve(成功返回),是个函数执行返回。 reject:顾名思义"拒绝",就是从请求变成了"失败",是个函数可以执行返回一个结果,但我们这里推荐大家返回一个错误new Error()。 上述例子,你可以reject('返回一个字符串'),随便你返回,但是我们还是建议返回一个Error对象,这样更加清晰是"失败的",这样更规范一点。 我们通过Promise的原型方法 then 拿到我们的返回值:
异步Promise及Async/Await可能最完整入门攻略
  • catch写法是针对于整个链式写法的错误捕获的,而then第二个参数是针对于上一个返回Promise的。
  • 两者的优先级:就是看谁在链式写法的前面,在前面的先捕获到错误,后面就没有错误可以捕获了,链式前面的优先级大,而且两者都不是break, 可以继续执行后续操作不受影响。
 
catch只是捕获错误的一个链式表达,并不是break!
 
奇怪,并没有await啊?setTimeout是异步啊,问题在哪?问题就在于setTimeout这是个异步,但是不是Promise!起不到“等待一会”的作用。
所以更准确的说法应该是用await声明的Promise异步返回,必须“等待”到有返回值的时候,代码才继续执行下去。

请记住await是在等待一个Promise的异步返回

 
 
Promise本身是同步的,他的then方法和catch方法是异步的

Loading Comments...