站長資訊網(wǎng)
有3種狀態(tài)：1、pending，表示正在進(jìn)行中，該狀態(tài)會進(jìn)行初始化；2、fulfilled，表示已成功；3、rejected，表示已失敗，會觸發(fā)后續(xù)的catch回調(diào)函數(shù)。promise的狀態(tài)發(fā)生改后就會凝固，不會再變，會一直保持這個結(jié)果。
本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。
Promise簡介
Promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案（回調(diào)函數(shù)和事件）更合理和更強(qiáng)大。
所謂Promise，簡單說就是一個容器，里面保存著某個未來才會結(jié)束的事件（通常是一個異步操作）的結(jié)果。
從語法上說，Promise 是一個構(gòu)造函數(shù)，從它可以獲取異步操作的消息。
Promise 提供統(tǒng)一的 API，各種異步操作都可以用同樣的方法進(jìn)行處理。有了Promise對象，就可以將異步操作以同步操作的流程表達(dá)出來，避免了層層嵌套的回調(diào)函數(shù)。
Promise對象提供統(tǒng)一的接口，使得控制異步操作更加容易。
我們知道，es5是單線程語言，語句執(zhí)行順序由上往下，而項目前端對接后端時，需要用到ajax，而ajax是異步的，可能導(dǎo)致數(shù)據(jù)的交互產(chǎn)生延遲，不利于編程。而promise函數(shù)可以很好的解決這個問題。
Promise實例化
Promise構(gòu)造函數(shù)接受一個函數(shù)作為參數(shù)，該函數(shù)的兩個參數(shù)分別是resolve和reject。而這兩個參數(shù)是兩個函數(shù)，由 JavaScript 引擎提供。
Promise對象代表一個異步操作，有三種狀態(tài)： pending（進(jìn)行中）、fulfilled（已成功）和rejected（已失敗）。
-
初始化，狀態(tài)：pending
-
當(dāng)調(diào)用resolve(成功)，狀態(tài)：pengding=>fulfilled
-
當(dāng)調(diào)用reject(失敗)，狀態(tài)：pending=>rejected
狀態(tài)發(fā)生改變之后就凝固了，不會再變了，會一直保持這個結(jié)果，這時就稱為 resolved（已定型）。
狀態(tài)變化：
1、pending -> resolved
2、pending -> rejected
狀態(tài)的表現(xiàn)
-
pending狀態(tài)不會觸發(fā)then和catch
-
resolved狀態(tài)會觸發(fā)后續(xù)的then回調(diào)函數(shù)
-
rejected狀態(tài)會觸發(fā)后續(xù)的catch回調(diào)函數(shù)
then和catch改變狀態(tài)
-
then正常情況下會返回resolved，報錯則返回rejected
-
catch正常情況下會返回resolved，報錯則返回rejected
const promise = new Promise(function(resolve,reject){ //...some code if(/*異步操作成功*/）{ resolve(value); // 狀態(tài)由pending變?yōu)閒ulfilled }else{ reject(error); // 狀態(tài)由pending變?yōu)閞ejected } })
例如：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>測試</title> </head> <body> <script> let promise = new Promise(function (resolve, reject) { if (3 < 5) { resolve("是正確的"); } else { reject("是錯誤的"); } }) console.log(promise); </script> </body> </html>
結(jié)果：
Promise的原型方法
定義在Promise.prototype中的方法，通過Promise實例可以直接調(diào)用。
1、Promise.prototype.then()
當(dāng)狀態(tài)由pending變?yōu)閒ulfilled的時候執(zhí)行該回調(diào)函數(shù)，
參數(shù)：
最多需要有兩個參數(shù)，Promise 的成功和失敗情況的回調(diào)函數(shù)。
返回值：
返回一個新的Promise實例對象，因此可以使用鏈?zhǔn)秸{(diào)用。
當(dāng)一個 Promise 完成（fulfilled）或者失?。╮ejected）時，返回函數(shù)將被異步調(diào)用（由當(dāng)前的線程循環(huán)來調(diào)度完成）。具體的返回值依據(jù)以下規(guī)則返回。如果 then 中的回調(diào)函數(shù)：
-
返回了一個值，那么 then 返回的 Promise 將會成為接受狀態(tài)，并且將返回的值作為接受狀態(tài)的回調(diào)函數(shù)的參數(shù)值。
-
沒有返回任何值，那么 then 返回的 Promise 將會成為接受狀態(tài)，并且該接受狀態(tài)的回調(diào)函數(shù)的參數(shù)值為 undefined。
-
throw拋出一個錯誤，那么 then 返回的 Promise 將會成為拒絕狀態(tài)，并且將拋出的錯誤作為拒絕狀態(tài)的回調(diào)函數(shù)的參數(shù)值。
-
返回一個已經(jīng)是接受狀態(tài)的 Promise，那么 then 返回的 Promise 也會成為接受狀態(tài)，并且將那個 Promise 的接受狀態(tài)的回調(diào)函數(shù)的參數(shù)值作為該被返回的Promise的接受狀態(tài)回調(diào)函數(shù)的參數(shù)值。
-
返回一個已經(jīng)是拒絕狀態(tài)的 Promise，那么 then 返回的 Promise 也會成為拒絕狀態(tài)，并且將那個 Promise 的拒絕狀態(tài)的回調(diào)函數(shù)的參數(shù)值作為該被返回的Promise的拒絕狀態(tài)回調(diào)函數(shù)的參數(shù)值。
-
返回一個未定狀態(tài)（pending）的 Promise，那么 then 返回 Promise 的狀態(tài)也是未定的，并且它的終態(tài)與那個 Promise 的終態(tài)相同；同時，它變?yōu)榻K態(tài)時調(diào)用的回調(diào)函數(shù)參數(shù)與那個 Promise 變?yōu)榻K態(tài)時的回調(diào)函數(shù)的參數(shù)是相同的。
將上面的規(guī)則簡單總結(jié)：
1、如果回調(diào)函數(shù)中的返回結(jié)果是promise對象，則對象狀態(tài)由回調(diào)函數(shù)的執(zhí)行結(jié)果決定
2、如果回到函數(shù)中的返回結(jié)果為非promise對象（無論是字符串、undefined…只要不是promise對象），對象狀態(tài)均為成功，返回值為對象成功調(diào)用中的值。
3、throw拋出錯誤，狀態(tài)為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()
當(dāng)狀態(tài)由pending變?yōu)閞ejected的時候執(zhí)行該回調(diào)函數(shù)，
參數(shù)：
回調(diào)函數(shù)，回調(diào)函數(shù)的參數(shù)為reject函數(shù)傳遞過來的值
返回值：
返回一個新的Promise實例對象，因此可以使用鏈?zhǔn)秸{(diào)用。
// 拋出一個錯誤，大多數(shù)時候?qū)⒄{(diào)用catch方法 let p1 = new Promise(function(resolve, reject) { throw 'Uh-oh!'; }); p1.catch(function(e) { console.log(e); // "Uh-oh!" });
推薦使用catch方法，不要在then方法中定義rejected狀態(tài)的回調(diào)函數(shù)；這是因為使用catch還可以捕獲在then方法執(zhí)行中存在的錯誤。
// 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結(jié)束時，無論結(jié)果是fulfilled或者是rejected，都會執(zhí)行指定的回調(diào)函數(shù)。這為在Promise是否成功完成后都需要執(zhí)行的代碼提供了一種方式。這避免了同樣的語句需要在then()和catch()中各寫一次的情況。
參數(shù)：
回調(diào)函數(shù)，不接收任何參數(shù)
返回值：
返回一個新的Promise實例對象
let p1 = new Promise(function(resolve, reject) { throw 'Uh-oh!'; }); p1.catch(function(e) { console.log(e); // "Uh-oh!" }).finally(function() { console.log('這段代碼最終都會執(zhí)行'); });
- promise封裝ajax請求
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <title>promise基本使用</title> </head> <body> <script> let promise = new Promise(function(resolve,reject){ // ajax發(fā)送異步請求 $.ajax({ // 請求路徑 url:'http://47.100.84.201:8888/carousel/findAll', // 成功回調(diào) success(res){ console.log("成功回調(diào)",res); // 通過resolve將成功的回調(diào)傳遞出去 //resolve(res); }, // 失敗回調(diào) error(err){ console.log("失敗回調(diào)",err); // 通過reject將失敗的回調(diào)傳遞出去 //reject(err); } }) }) // 通過promise實例對象的實例方法對數(shù)據(jù)進(jìn)行操作 promise .then(res => console.log("接收到resolve傳遞過來的數(shù)據(jù)" + res)) .catch(err => console.log("接收reject傳遞的數(shù)據(jù)" + err)) .finally(()=>{ console.log("無論成功還是失敗都會調(diào)用!") }) </script> </body> </html>
分析：當(dāng)在promise實例對象中ajax的兩個回調(diào)函數(shù)中使用
console.log("成功回調(diào)",res)和console.log("失敗回調(diào)",err);語句反映調(diào)用結(jié)果（成功或失?。r，瀏覽器控制臺并不會執(zhí)行thencatchfinally方法中的內(nèi)容，因為此時then方法中并沒有接收到來自ajax的res，catch方法有沒有接收到來自ajax的err，所以并不會執(zhí)行箭頭函數(shù)中的語句。
當(dāng)改為resolve(res);和reject(err);時結(jié)果如下：
- promise層級調(diào)用
假設(shè)有三個文件first.txt,second.txt,third.txt，讀取文件
第一種方式：
使用普通方式進(jìn)行層級讀取文件（不推薦），如下：
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 + 'tn' + data2 + 'tn' + data3; console.log(result); //... //如果后面還有其他文件呢，會導(dǎo)致回調(diào)地獄，代碼會橫向變得很寬很長，并且這里data不能重名，需要不斷的取名字 }); }); });
第二種方式：
使用promise實現(xiàn)，解決縮進(jìn)問題
const fs = require("fs"); // 初始化promise：讀取第一個文件，使用resolve函數(shù)傳遞出去讀取到的數(shù)據(jù)，用Promise對象接收 const promise = new Promise((resolve,reject)=>{ fs.readFile('../FILE/first.txt',(err,data)=>{ resolve(data); }) }) // 執(zhí)行回調(diào)函數(shù) promise.then(value => { //先看能不能獲取到value值 // console.log(value); //輸出的是buffer // console.log(value.toString()); //可以使用toString方法轉(zhuǎn)化buffer為正常字符串 // then方法的返回值是一個promise對象，所以這里直接使用return返回一個promise對象 return new Promise((resolve,reject)=>{ // promise中的主要操作也是讀取文件內(nèi)容 fs.readFile('../FILE/second.txt',(err,data)=>{ // 將讀取到的數(shù)據(jù)傳遞出去，這里將讀取到的數(shù)據(jù)放到了數(shù)組中，一起傳了出去 // value是初始化時讀取文件first.txt的內(nèi)容，data指的是當(dāng)前讀到的文件內(nèi)容 resolve([value,data]); }) }) //使用鏈?zhǔn)秸{(diào)用方式繼續(xù)調(diào)用，讀取下一個文件的內(nèi)容 }).then(value=>{ return new Promise((resolve,reject)=>{ fs.readFile('../FILE/third.txt',(err,data)=>{ // 將讀取到的data通過push方法添加進(jìn)數(shù)組中 // 這里的value是前面?zhèn)鬟^來的數(shù)組 value.push(data); resolve(value); }) }) }).then(value=>{ // 輸出一一讀取文件后的結(jié)果 console.log(value.toString()); // 這是第一個文件,這是第二個文件,這是第三個文件 // 文件間通過逗號分隔 })
雖然目前使用promise的代碼量確實比較多，但卻可以避免代碼橫向增多的問題，不會影響代碼閱讀
靜態(tài)方法
定義在Promise中的方法，通過Promise可以直接調(diào)用。
1、Promise.all([p1,p2])
Promise.all用于將多個 Promise 實例，包裝成一個新的 Promise 實例
參數(shù)：
數(shù)組，數(shù)組中的元素為Promise實例
返回值：
Promise實例,當(dāng)p1,p2狀態(tài)都為fulfilled時候，該實例的狀態(tài)才為fulfilled，此時p1，p2的返回值組成一個數(shù)組，傳遞給該實例的回調(diào)函數(shù)；只要p1，p2的返回值有一個變?yōu)閞ejected，該實例狀態(tài)為rejected。
const promise1 = Promise.resolve(3); //該方法用于將現(xiàn)有對象轉(zhuǎn)化為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 實例
參數(shù)：
數(shù)組，數(shù)組中的元素為Promise實例
返回值：
Promise實例,當(dāng)p1，p2之中有一個實例率先改變狀態(tài)，該實例的狀態(tài)就跟著改變。那個率先改變的 Promise 實例的返回值，就傳遞給該實例的回調(diào)函數(shù)。(誰執(zhí)行的快就返回誰）
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 實例
參數(shù)：
數(shù)組，數(shù)組中的元素為Promise實例
返回值：
Promise實例,只要p1,p2狀態(tài)有一個變?yōu)閒ulfilled，該實例的狀態(tài)為fulfilled；p1，p2狀態(tài)都變?yōu)閞ejected，該實例狀態(tài)才為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()
用于將現(xiàn)有對象轉(zhuǎn)化為Promise實例
參數(shù)：
任意值
const promise1 = Promise.resolve(123); promise1.then((value) => { console.log(value); // expected output: 123 });
5、Promise.reject()
返回一個新的 Promise 實例，該實例的狀態(tài)為rejected。
參數(shù)：
錯誤信息
Promise.reject(new Error('fail')).then(function() { // not called }, function(error) { console.log(error); // Stacktrace });
【
