es6 promise有幾個狀態

有3種狀態：1、pending，表示正在進行中，該狀態會初始化；2、fulfilled，表示已成功；3、rejected，表示已失敗，會觸發後續的catch回呼函數。 promise的狀態改後就會凝固，不會再變，會一直維持這個結果。

#本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

Promise簡介

Promise 是非同步程式設計的解決方案，比傳統的解決方案（回呼函數和事件）更合理和更強大。

所謂Promise，簡單說就是一個容器，裡面保存著某個未來才會結束的事件（通常是一個非同步操作）的結果。

從語法上來說，Promise 是一個建構函數，從它可以取得非同步操作的訊息。

Promise 提供統一的 API，各種非同步操作都可以用同樣的方法來處理。有了Promise對象，就可以將非同步操作以同步操作的流程表達出來，避免了層層嵌套的回呼函數。

Promise物件提供統一的接口，使得控制非同步操作更加容易。

我們知道，es5是單線程語言，語句執行順序由上往下，而專案前端對接後端時，需要用到ajax，而ajax是異步的，可能導致資料的交互產生延遲，不利於編程。而promise函數可以很好的解決這個問題。

Promise實例化

Promise建構子接受一個函數為參數，該函數的兩個參數分別是resolve和reject。而這兩個參數是兩個函數，由 JavaScript 引擎提供。

Promise物件代表一個非同步操作，有三種狀態：pending（進行中）、fulfilled（已成功）和rejected（已失敗）。

• 初始化，狀態：pending

• 當呼叫resolve(成功)，狀態：pengding=>fulfilled

• #當呼叫reject(失敗)，狀態：pending=>rejected

#狀態改變之後就凝固了，不會再變了，會一直維持這個結果，這時稱為resolved（已定型）。

狀態變化：

1、pending -> resolved

2、pending -> rejected

狀態的表現

• #pending狀態不會觸發then和catch

• resolved狀態會觸發後續的then回呼函數

• rejected狀態會觸發後續的catch回呼函數

then和catch改變狀態

• then正常情況下會傳回resolved，報錯則傳回rejected

• catch正常情況下會傳回resolved，報錯則回傳rejected

const promise = new Promise(function(resolve,reject){ //...some code if(/*异步操作成功*/）{ resolve(value); // 状态由pending变为fulfilled }else{ reject(error); // 状态由pending变为rejected } })

例如：

結果：

Promise的原型方法

定義在Promise.prototype中的方法，透過Promise實例可以直接呼叫。

1、Promise.prototype.then()

#當狀態由pending變成fulfilled的時候執行該回呼函數，

#參數：

最多需要有兩個參數，Promise 的成功和失敗情況的回呼函數。

傳回值：

傳回一個新的Promise實例對象，因此可以使用鍊式呼叫。

當一個 Promise 完成（fulfilled）或失敗（rejected）時，返回函數將被非同步呼叫（由當前的線程循環來調度完成）。具體的返回值依據以下規則傳回。如果 then 中的回呼函數：

• 傳回了一個值，那麼 then 傳回的 Promise 將會成為接受狀態，並且將傳回的值作為接受狀態的回呼函數的參數值。

• 沒有傳回任何值，那麼 then 傳回的 Promise 將會成為接受狀態，而該接受狀態的回呼函數的參數值為 undefined。

• throw拋出一個錯誤，那麼 then 傳回的 Promise 將會成為拒絕狀態，並且將拋出的錯誤作為拒絕狀態的回呼函數的參數值。

• 返回一个已经是接受状态的 Promise，那么 then 返回的 Promise 也会成为接受状态，并且将那个 Promise 的接受状态的回调函数的参数值作为该被返回的Promise的接受状态回调函数的参数值。

• 返回一个已经是拒绝状态的 Promise，那么 then 返回的 Promise 也会成为拒绝状态，并且将那个 Promise 的拒绝状态的回调函数的参数值作为该被返回的Promise的拒绝状态回调函数的参数值。

• 返回一个未定状态（pending）的 Promise，那么 then 返回 Promise 的状态也是未定的，并且它的终态与那个 Promise 的终态相同；同时，它变为终态时调用的回调函数参数与那个 Promise 变为终态时的回调函数的参数是相同的。

将上面的规则简单总结：
1、如果回调函数中的返回结果是promise对象，则对象状态由回调函数的执行结果决定
2、如果回到函数中的返回结果为非promise对象（无论是字符串、undefined…只要不是promise对象），对象状态均为成功，返回值为对象成功调用中的值。
3、throw抛出错误，状态为rejected

let p1 = new Promise((resolve, reject) => { resolve('成功！'); // 或者 // reject(new Error("出错了！")); }); p1.then(value => { console.log(value); // 成功！ }, error => { console.log(error); // 出错了！ });

2、Promise.prototype.catch()

当状态由pending变为rejected的时候执行该回调函数，
参数：
回调函数，回调函数的参数为reject函数传递过来的值
返回值：
返回一个新的Promise实例对象，因此可以使用链式调用。

// 抛出一个错误，大多数时候将调用catch方法 let p1 = new Promise(function(resolve, reject) { throw 'Uh-oh!'; }); p1.catch(function(e) { console.log(e); // "Uh-oh!" });

推荐使用catch方法，不要在then方法中定义rejected状态的回调函数；这是因为使用catch还可以捕获在then方法执行中存在的错误。

// bad promise.then(function(data) { // success }, function(err) { // error }); // good promise.then(function(data) { // success }) .catch(function(err) { // error })

3、Promise.prototype.finally()

finally() 方法返回一个Promise。在promise结束时，无论结果是fulfilled或者是rejected，都会执行指定的回调函数。这为在Promise是否成功完成后都需要执行的代码提供了一种方式。这避免了同样的语句需要在then()和catch()中各写一次的情况。

参数：

回调函数，不接收任何参数

返回值：

返回一个新的Promise实例对象

let p1 = new Promise(function(resolve, reject) { throw 'Uh-oh!'; }); p1.catch(function(e) { console.log(e); // "Uh-oh!" }).finally(function() { console.log('这段代码最终都会执行'); });

• promise封装ajax请求

分析：当在promise实例对象中ajax的两个回调函数中使用console.log("成功回调",res)和console.log("失败回调",err);语句反映调用结果（成功或失败）时，浏览器控制台并不会执行then\catch\finally方法中的内容，因为此时then方法中并没有接收到来自ajax的res，catch方法有没有接收到来自ajax的err，所以并不会执行箭头函数中的语句。

当改为resolve(res);和reject(err);时结果如下：

• promise层级调用
  假设有三个文件first.txt,second.txt,third.txt，读取文件
  第一种方式：
  使用普通方式进行层级读取文件（不推荐），如下：

const fs = require("fs"); fs.readFile('../FILE/first.txt',(err,data1) => { fs.readFile('../FILE/second.txt',(err,data2)=>{ fs.readFile('../FILE/second.txt',(err,data3)=>{ let result = data1 + '\t\n' + data2 + '\t\n' + data3; console.log(result); //... //如果后面还有其他文件呢，会导致回调地狱，代码会横向变得很宽很长，并且这里data不能重名，需要不断的取名字 }); }); });

第二种方式：

使用promise实现，解决缩进问题

const fs = require("fs"); // 初始化promise：读取第一个文件，使用resolve函数传递出去读取到的数据，用Promise对象接收 const promise = new Promise((resolve,reject)=>{ fs.readFile('../FILE/first.txt',(err,data)=>{ resolve(data); }) }) // 执行回调函数 promise.then(value => { //先看能不能获取到value值 // console.log(value); //输出的是buffer // console.log(value.toString()); //可以使用toString方法转化buffer为正常字符串 // then方法的返回值是一个promise对象，所以这里直接使用return返回一个promise对象 return new Promise((resolve,reject)=>{ // promise中的主要操作也是读取文件内容 fs.readFile('../FILE/second.txt',(err,data)=>{ // 将读取到的数据传递出去，这里将读取到的数据放到了数组中，一起传了出去 // value是初始化时读取文件first.txt的内容，data指的是当前读到的文件内容 resolve([value,data]); }) }) //使用链式调用方式继续调用，读取下一个文件的内容 }).then(value=>{ return new Promise((resolve,reject)=>{ fs.readFile('../FILE/third.txt',(err,data)=>{ // 将读取到的data通过push方法添加进数组中 // 这里的value是前面传过来的数组 value.push(data); resolve(value); }) }) }).then(value=>{ // 输出一一读取文件后的结果 console.log(value.toString()); // 这是第一个文件,这是第二个文件,这是第三个文件 // 文件间通过逗号分隔 })

虽然目前使用promise的代码量确实比较多，但却可以避免代码横向增多的问题，不会影响代码阅读

静态方法

定义在Promise中的方法，通过Promise可以直接调用。

1、Promise.all([p1,p2])

Promise.all用于将多个 Promise 实例，包装成一个新的 Promise 实例
参数：
数组，数组中的元素为Promise实例
返回值：
Promise实例,当p1,p2状态都为fulfilled时候，该实例的状态才为fulfilled，此时p1，p2的返回值组成一个数组，传递给该实例的回调函数；只要p1，p2的返回值有一个变为rejected，该实例状态为rejected。

const promise1 = Promise.resolve(3); //该方法用于将现有对象转化为Promise实例 const promise2 = 42; const promise3 = new Promise((resolve, reject) => { setTimeout(resolve, 100, 'foo'); }); Promise.all([promise1, promise2, promise3]).then((values) => { console.log(values); }); // expected output: Array [3, 42, "foo"]

2、Promise.race([p1,p2])

Promise.race用于将多个 Promise 实例，包装成一个新的 Promise 实例
参数：
数组，数组中的元素为Promise实例
返回值：
Promise实例,当p1，p2之中有一个实例率先改变状态，该实例的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给该实例的回调函数。(谁执行的快就返回谁）

const promise1 = new Promise((resolve, reject) => { setTimeout(resolve, 500, 'one'); }); const promise2 = new Promise((resolve, reject) => { setTimeout(resolve, 100, 'two'); }); Promise.race([promise1, promise2]).then((value) => { console.log(value); // Both resolve, but promise2 is faster }); // expected output: "two"

3、Promise.any([p1,p2])

用于将多个 Promise 实例，包装成一个新的 Promise 实例

参数：

数组，数组中的元素为Promise实例

返回值：

Promise实例,只要p1,p2状态有一个变为fulfilled，该实例的状态为fulfilled；p1，p2状态都变为rejected，该实例状态才为rejected。

const pErr = new Promise((resolve, reject) => { reject("总是失败"); }); const pSlow = new Promise((resolve, reject) => { setTimeout(resolve, 500, "最终完成"); }); const pFast = new Promise((resolve, reject) => { setTimeout(resolve, 100, "很快完成"); }); Promise.any([pErr, pSlow, pFast]).then((value) => { console.log(value); // pFast fulfils first }) // expected output: "很快完成"

4、Promise.resolve()

用于将现有对象转化为Promise实例

参数：

任意值

const promise1 = Promise.resolve(123); promise1.then((value) => { console.log(value); // expected output: 123 });

5、Promise.reject()

返回一个新的 Promise 实例，该实例的状态为rejected。

参数：

错误信息

Promise.reject(new Error('fail')).then(function() { // not called }, function(error) { console.log(error); // Stacktrace });

【相关推荐：javascript视频教程、web前端】

以上是es6 promise有幾個狀態的詳細內容。更多資訊請關注PHP中文網其他相關文章！