es6 promise有幾個狀態-前端問答-PHP中文網

首頁

web前端

前端問答

es6 promise有幾個狀態

青灯夜游

May 19, 2022 pm 04:30 PM

es6promise

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

es6 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
	}
})

例如：

<!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>

結果：

es6 promise有幾個狀態

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(&#39;成功！&#39;);
	// 或者
	// 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 &#39;Uh-oh!&#39;;
});

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 &#39;Uh-oh!&#39;;
});
p1.catch(function(e) {
	console.log(e); // "Uh-oh!"
}).finally(function() { 
	console.log(&#39;这段代码最终都会执行&#39;); 
});

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发送异步请求
            $.ajax({
                // 请求路径
                url:&#39;http://47.100.84.201:8888/carousel/findAll&#39;,
                // 成功回调
                success(res){
                    console.log("成功回调",res);
                    
                    // 通过resolve将成功的回调传递出去
                    //resolve(res);
                },
                // 失败回调
                error(err){
                    console.log("失败回调",err);
                    
                    // 通过reject将失败的回调传递出去
                    //reject(err);
                }
            })
        })

        // 通过promise实例对象的实例方法对数据进行操作
        promise
        .then(res => console.log("接收到resolve传递过来的数据" + res))
        .catch(err => console.log("接收reject传递的数据" + err))
        .finally(()=>{
            console.log("无论成功还是失败都会调用!")
        })
    </script> 
</body>
</html>

分析：当在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(&#39;../FILE/first.txt&#39;,(err,data1) => {
    fs.readFile(&#39;../FILE/second.txt&#39;,(err,data2)=>{
        fs.readFile(&#39;../FILE/second.txt&#39;,(err,data3)=>{
            let result = data1 + &#39;\t\n&#39; + data2 + &#39;\t\n&#39; + data3;
            console.log(result);
            //...
            //如果后面还有其他文件呢，会导致回调地狱，代码会横向变得很宽很长，并且这里data不能重名，需要不断的取名字
        });
    });
});

第二种方式：

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

const fs = require("fs");
// 初始化promise：读取第一个文件，使用resolve函数传递出去读取到的数据，用Promise对象接收
const promise = new Promise((resolve,reject)=>{
    fs.readFile(&#39;../FILE/first.txt&#39;,(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(&#39;../FILE/second.txt&#39;,(err,data)=>{
            // 将读取到的数据传递出去，这里将读取到的数据放到了数组中，一起传了出去
            // value是初始化时读取文件first.txt的内容，data指的是当前读到的文件内容
            resolve([value,data]);
        })
    })
    //使用链式调用方式继续调用，读取下一个文件的内容
}).then(value=>{
    return new Promise((resolve,reject)=>{
        fs.readFile(&#39;../FILE/third.txt&#39;,(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, &#39;foo&#39;);
});

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, &#39;one&#39;);
});

const promise2 = new Promise((resolve, reject) => {
	setTimeout(resolve, 100, &#39;two&#39;);
});

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(&#39;fail&#39;)).then(function() {
	// not called
}, function(error) {
	console.log(error); // Stacktrace
});

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

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

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML和React的集成：實用指南Apr 21, 2025 am 12:16 AM

HTML與React可以通過JSX無縫整合，構建高效的用戶界面。 1)使用JSX嵌入HTML元素，2)利用虛擬DOM優化渲染性能，3)通過組件化管理和渲染HTML結構。這種整合方式不僅直觀，還能提升應用性能。

React和HTML：渲染數據和處理事件Apr 20, 2025 am 12:21 AM

React通過state和props高效渲染數據，並通過合成事件系統處理用戶事件。 1）使用useState管理狀態，如計數器示例。 2）事件處理通過在JSX中添加函數實現，如按鈕點擊。 3）渲染列表需使用key屬性，如TodoList組件。 4）表單處理需使用useState和e.preventDefault()，如Form組件。

後端連接：反應如何與服務器互動Apr 20, 2025 am 12:19 AM

React通過HTTP請求與服務器交互，實現數據的獲取、發送、更新和刪除。 1)用戶操作觸發事件，2)發起HTTP請求，3)處理服務器響應，4)更新組件狀態並重新渲染。

反應：專注於用戶界面（前端）Apr 20, 2025 am 12:18 AM

React是一種用於構建用戶界面的JavaScript庫，通過組件化開發和虛擬DOM提高效率。 1.組件與JSX：使用JSX語法定義組件，增強代碼直觀性和質量。 2.虛擬DOM與渲染：通過虛擬DOM和diff算法優化渲染性能。 3.狀態管理與Hooks：Hooks如useState和useEffect簡化狀態管理和副作用處理。 4.使用示例：從基本表單到高級的全局狀態管理，使用ContextAPI。 5.常見錯誤與調試：避免狀態管理不當和組件更新問題，使用ReactDevTools調試。 6.性能優化與最佳

React的角色：前端還是後端？澄清區別Apr 20, 2025 am 12:15 AM

reactisafrontendlibrary，focusedonBuildingUserInterfaces.itmanagesuistateandupdatesefficefited avelyuseVirusity diftualdom，and internactSwithBackendServIcesViaApisforDatahandling，butdoesnotprocessorcorsorsorstoredordordordoredairself。

在HTML中進行反應：構建交互式用戶界面Apr 20, 2025 am 12:05 AM

React可以嵌入到HTML中來增強或完全重寫傳統的HTML頁面。 1)使用React的基本步驟包括在HTML中添加一個根div，並通過ReactDOM.render()渲染React組件。 2)更高級的應用包括使用useState管理狀態和實現複雜的UI交互，如計數器和待辦事項列表。 3)優化和最佳實踐包括代碼分割、惰性加載和使用React.memo和useMemo來提高性能。通過這些方法，開發者可以利用React的強大功能來構建動態和響應迅速的用戶界面。

反應：現代前端發展基礎Apr 19, 2025 am 12:23 AM

React是構建現代前端應用的JavaScript庫。 1.它採用組件化和虛擬DOM優化性能。 2.組件使用JSX定義，狀態和屬性管理數據。 3.Hooks簡化生命週期管理。 4.使用ContextAPI管理全局狀態。 5.常見錯誤需調試狀態更新和生命週期。 6.優化技巧包括Memoization、代碼拆分和虛擬滾動。