好程序員web前端教程分享怎么用promise解決回調(diào)和異步
首先讓我們看看下面這題輸出什么？

永定網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,永定網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為永定千余家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢，請找那個售后服務(wù)好的永定做網(wǎng)站的公司定做！

setTimeout(function() {
      console.log(1);
},1000)
console.log(2);

我們得到的結(jié)果是:先輸出2,后輸出1;這是什么原因呢？大家應(yīng)該都知道定時器是異步的;所以先先輸出2;
那么我們的需求來了,怎么先輸出1,然后輸出2呢？

function foo(callback) {
setTimeout(function() {
    console.log(1);
    callback();
},1000)
}
foo(function() {
      console.log(2);
})

現(xiàn)在我們看看打印的結(jié)果吧,果然先輸出的1,然后輸出2了;這個是通過回調(diào)函數(shù)解決的;
現(xiàn)在我么你的需求變了,我們每隔1秒后做一次輸出;

function foo(callback) {
    setTimeout(function() {
        console.log('1秒后輸出');
        callback()
    }, 1000)
}
foo(function() {
    console.log('第一次輸出');
    foo(function() {
        console.log('第二次輸出');
        foo(function() {
            console.log('第二次輸出');
        })
    })
})

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

是的,但是如果我們多來幾次,大家會不會發(fā)現(xiàn)回調(diào)的太多了嗎？這就是大家所說的毀掉地獄;

###所以ES6給我們提供了一個解決毀掉地獄的方法:promise;
promise是一種用異步的方式處理值的方法,promise是一個對象,解決層層嵌套問題
####promise對象的狀態(tài):

進(jìn)行中: pending
成功: resovled
失敗: rejected

promise對象的方法:

then() 成功后執(zhí)行; 如果有兩個參數(shù):第一個參數(shù)成功后執(zhí)行,第二個參數(shù)失敗后執(zhí)行;
catch() 失敗后執(zhí)行;
人promise all([]).then() 都成功后執(zhí)行圖then的第一個方法;
promise.race[(p1,p2,p3,---)] 只要有一個率先改變狀態(tài),promise就會執(zhí)行對應(yīng)的狀態(tài)

var promise = new Promise(function (resolved, rejected) {
resolved('ok'); 
rejected('no');
//如果成功和失敗同時寫,執(zhí)行先寫的;(特點(diǎn)狀態(tài)一旦改變，就不可逆了)
});
promise.then(function(msg) {
console.log('ok：' + msg);
},function (msg) {
console.log('no：' + msg);
});

打印結(jié)果是: ok: ok
現(xiàn)在我們做一個練習(xí): 使用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回調(diào)的問題呢？咱們繼續(xù)往下看.

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) //如果路徑對了,我們得到了數(shù)據(jù)
},function (msg) {
alert(msg) //如果路徑錯了我們彈出error
})
}