promise的简单用法

最新推荐文章于 2025-03-14 17:30:13 发布

转载最新推荐文章于 2025-03-14 17:30:13 发布 · 94 阅读

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5ce2d71ae51d45554877a529

ES6中Promise成为原生对象，是异步编程解决方案，可解决异步回调多层嵌套问题。Promise对象有resolved、rejected、pending三种状态，axios是其实现版本。还介绍了Promise的all、race等方法，如all需所有参数状态为resolved，自身才为resolved；race则只要一个参数状态改变，自身就改变。

在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)
})
复制代码

转载于:https://juejin.im/post/5ce2d71ae51d45554877a529