promise的簡單用法

在es6中，promise終於成爲了原生對象，能夠直接使用。
promise是異步編程的一種解決方案。解決了異步回調多層嵌套的問題。

1.promise狀態的理解

用new Promise實例化的promise對象有三個狀態：resolved(fulfilled) rejected pending

2.promise的簡單用法

// 封裝一個方法run_a，當Math.random()取的值小於0.5時執行resolve，不然執行reject
var run_a  = function () {
    var _promise = new Promise(function(resolve, reject){
        // 模擬異步
        setTimeout(function () {
            var rand = Math.random()
            if (rand < 0.5) {
                resolve('resole_a ' + rand)
            } else {
                reject('reject_a ' + rand)
            }
        }, 300)
    })
    return _promise
}
// 封裝一個方法run_b，當Math.random()取的值小於0.5時執行resolve，不然執行reject
var run_b  = function () {
    var _promise = new Promise(function(resolve, reject){
        setTimeout(function () {
            var rand = Math.random()
            if (rand < 0.5) {
                resolve('resole_b ' + rand)
            } else {
                reject('reject_b ' + rand)
            }
        }, 300)
    })
    return _promise
}

run_a().then(function (data) {
    console.log('第一次產生的值：', data) // 第一次resolve才能進then,不然直接進catch
    return run_b() // 第一次resolve才能執行第二次，而且第二次的值必須繼續.then才能得到。
    // 此處必須return出來才能鏈式調用
}).then(function (data) {
    console.log('第二次產生的值：', data)
}).catch(function (e) {
    console.log('失敗：', e)
})
複製代碼

3.promise的一些方法

axios是promise的實現版本，axios執行後返回一個promise對象

axios.post('xxx').then(res => {
    return axios.post('bbb', {name: res.name})
}).then(res => {
    console.log(res)
})
複製代碼

promise的其餘方法all, race

Promise.all([
    axios.get('xxx'),
    axios.get('aaa')
]).then().catch(error=>{
    
})
複製代碼

promise.all([p1,p2,p3])當p1,p2,p3的狀態都變成resolved時，promise的狀態纔會變成resolved
promise.race([p1,p2,p3])競速方法，p1,p2,p3只要有一個改變狀態，promise就會當即變成相同的狀態並執行對應的回調。

promise.all(參數是promise對象)

var run_c  = function () {
    var _promise = new Promise(function(resolve, reject){
        setTimeout(function () {
            var rand = Math.random()
            if (rand < 0.5) {
                resolve('c_ok ' + rand)
            } else {
                reject('c_error ' + rand)
            }
        }, 1000)
    })
    return _promise
}
var run_d  = function () {
    var _promise = new Promise(function(resolve, reject){
        setTimeout(function () {
            var rand = Math.random()
            if (rand < 0.5) {
                resolve('d_ok ' + rand)
            } else {
                reject('d_error ' + rand)
            }
        }, 1000)
    })
    return _promise
}
Promise.all([run_c(), run_d()]).then(function (data) {
    console.log('所有執行完：', data)
}, function (e) {
    console.log('promise.all有異常：', e)
})
複製代碼