首頁 > web前端 > 前端問答 > es6 promise有幾個狀態

es6 promise有幾個狀態

青灯夜游
發布: 2023-01-11 17:03:22
原創
3196 人瀏覽過

有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建構子接受一個函數為參數,該函數的兩個參數分別是 resolvereject。而這兩個參數是兩個函數,由 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,所以并不会执行箭头函数中的语句。
es6 promise有幾個狀態
当改为resolve(res);reject(err);时结果如下:
es6 promise有幾個狀態

  • 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,该实例的状态为fulfilledp1,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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板