本文實例講述了ES6中Promise的使用方法。分享給大家供大家參考,具體如下:
在javascript中,代碼是單線程執行的,對于一些比較耗時的IO操作,都是通過異步回調函數來實現的。
但是這樣會存在一個問題,當下一個的操作需要上一個操作的結果時,我們只能把代碼嵌到上一個操作的回調函數里,這樣一層嵌一層,最終形成回調地獄。
$.get('/login.php', function (login) { $.get('/user.php', function (user) { $.get('/info.php', function (info) { //代碼就這樣一層嵌一層,不夠直觀,維護也麻煩 }); });});為了解決這種問題,ES6中就提供了Promise方法來解決這種問題。
Promise是一個構造函數,通過它,我們可以創建一個Promise實例對象。
let p = new Promise(function (resolve, reject) { setTimeout(() => { console.log('OK'); resolve('OK'); }, 1000);});Promise構造函數接受一個函數作為參數,這個函數有兩個參數,resolve和reject。
resolve函數是將Promise的狀態設置為fulfilled(完成),reject函數是將Promise的狀態設置為rejected(失敗)。
上述代碼,我們并沒有進行任何調用,當運行時,間隔1秒后輸出了'OK'。所以這里需要注意,我們通常使用Promise時,需要在外層再包裹一層函數。
let p = function () { return new Promise(function (resolve, reject) { setTimeout(() => { console.log('OK'); resolve('OK'); }, 1000); });};p();上面的代碼p();返回的是一個Promise實例對象,Promise對象上有 then() , catch() , finally() 方法。
then方法有兩個參數,onFulfilled和onRejected,都是函數。
onFulfilled用于接收resolve方法傳遞過來的數據,onRejected用于接收reject方法傳遞過來的數據。
let p = function () { return new Promise(function (resolve, reject) { setTimeout(() => { if (Math.random() > 0.5) { resolve('OK'); } else { reject('ERR'); } }, 1000); });};p().then(function (data) { console.log('fulfilled', data);}, function (err) { console.log('rejected', err);});then()方法總是會返回一個Promise實例,這樣我們就可以一直調用then()。
在then方法中,你既可以return 一個具體的值 ,還可以return 一個Promise對象。
如果直接return的是一個數據,那then方法會返回一個新Promise對象,并以該數據進行resolve。
let p = function () { return new Promise(function (resolve, reject) { resolve(1); });};p().then(function (data) { console.log(`第 ${data} 次調用`); //注意這里直接返回的值 //then會創建一個新的Promise對象,并且以返回的值進行resolve //那么該值會被下面的then方法的onFulfilled回調拿到 return ++data;}).then(function (data) { console.log(`第 ${data} 次調用`); return ++data;}).then(function (data) { console.log(`第 ${data} 次調用`); return ++data;});
新聞熱點
疑難解答
圖片精選