當前位置: 首頁 / 技術分享 / 正文
好程序員web前端培訓分享怎么用promise解決回調和異步

2019-12-06

HTML5 HTML5培訓 好程序員 web前端培訓

好程序員web前端培訓分享怎么用promise解決回調和異步

首先讓我們看看下面這題輸出什么?

setTimeout(function() {

      console.log(1);

},1000)

console.log(2);

```

我們得到的結果是:先輸出2,后輸出1;這是什么原因呢?大家應該都知道定時器是異步的;所以先先輸出2;

那么我們的需求來了,怎么先輸出1,然后輸出2呢?

```

function foo(callback) {

setTimeout(function() {

console.log(1);

callback();

},1000)

}

foo(function() {

      console.log(2);

})

```

現在我們看看打印的結果吧,果然先輸出的1,然后輸出2;這個是通過回調函數解決的;

現在我么你的需求變了,我們每隔1秒后做一次輸出;

```

function foo(callback) {

setTimeout(function() {

console.log('1秒后輸出');

callback()

}, 1000)

}

foo(function() {

console.log('第一次輸出');

foo(function() {

console.log('第二次輸出');

foo(function() {

console.log('第二次輸出');

})

})

})

```

這樣是不是解決我們的問題了呢?

>是的,但是如果我們多來幾次,大家會不會發現回調的太多了嗎?這就是大家所說的毀掉地獄;

 

###所以ES6給我們提供了一個解決毀掉地獄的方法:promise;

**promise是一種用異步的方式處理值的方法,promise是一個對象,解決層層嵌套問題**

####promise對象的狀態:

>進行中: pending

成功: resovled

失敗: rejected

 

**promise對象的方法:**

>then() 成功后執行如果有兩個參數:第一個參數成功后執行,第二個參數失敗后執行;

catch() 失敗后執行;

promise all([]).then() 都成功后執行圖then的第一個方法;

promise.race[(p1,p2,p3,---)] 只要有一個率先改變狀態,promise就會執行對應的狀態

```

var promise = new Promise(function (resolved, rejected) {

resolved('ok');

rejected('no');

//如果成功和失敗同時寫,執行先寫的;(特點狀態一旦改變,就不可逆了)

});

promise.then(function(msg) {

console.log('ok' + msg);

},function (msg) {

console.log('no' + msg);

});

```

打印結果是: ok: ok

現在我們做一個練習使用promise 加載一張圖片;加載成功就將圖片加載到body,如果加載失敗,提示失敗;

```

var promise = new Promise(function (resolved, rejected) {

var img = document.createElement('img');

img.src = './img/1.png';

img.onload = function () {

resolved(img)   //如果加載成功就返回resolved(

}

img.onerror = function () {

rejected('失敗')    //如果加載成功就返回rejected(

}

})

promise.then(function (msg) {

document.body.appendChild(msg)

},function (msg) {

alert(msg)

})

```

怎么樣大家是不是對promise有了了解?

那么怎么用promise解決異步的問題呢?我們還是每隔1秒后做一次輸出;

```function fn() {

var promise = new Promise(function(resolved, rejected) {

setTimeout(function() {

console.log('每隔一秒');

resolved()

}, 1000)

});

return promise;

}

fn().then(function() {

console.log('第一次輸出');

return fn()

}).then(function() {

console.log('第二次輸出');

return fn()

}).then(function () {

console.log('第三次輸出');

})

```

Promise如何解決ajax回調的問題呢?咱們繼續往下看.

```

function ajaxPromise(url) {

var promise = new Promise(function(resolved, rejected) {

var xhr = new XMLHttpRequest();

xhr.open('get', url);

xhr.send();

xhr.onreadystatechange = function() {

if (xhr.readyState === 4 && xhr.status === 200) {

resolved( xhr.responseText);   //告訴promise成功了

}

}

setTimeout(function () {//5秒后請求不到

rejected('error')  //告訴promise失敗了

},5000)

})

return promise;

}

document.onclick = function () {

var pro = ajaxPromise('data.json');

pro.then(function (msg) {

alert(msg)   //如果路徑對了,我們得到了數據

},function (msg) {

alert(msg)//如果路徑錯了我們彈出error

})

}

```

好程序員開班動態

More+
  • HTML5大前端 <高端班>

    開班時間:2020-02-17(北京)

    預約報名

    開班時間:2020-03-02(深圳)

    預約報名
  • 大數據+人工智能 <好程序員嚴選班>

    開班時間:2019-12-23(北京)

    開班盛況
  • 大數據+人工智能 <好程序員班>

    開班時間:2020-02-24(杭州)

    預約報名

    開班時間:2020-02-17(北京)

    預約報名
  • JavaEE分布式開發 <高端班>

    開班時間:2020-03-09(北京)

    預約報名
  • Python全棧+人工智能 <高端班>

    開班時間:2019-07-22(北京)

    開班盛況
  • 云計算開發 <高端班>

    開班時間:2020-02-24(北京)

    預約報名
在線咨詢
免費試聽
入學教程
立即報名

Copyright 2007-2019 北京千鋒互聯科技有限公司 .All Right 京ICP備12003911號-5 京公安網11010802011455號

我要久久综合色久久,亚洲伊人色综网