谈谈JavaScript异步操作Promise

最新推荐文章于 2024-04-09 18:47:28 发布

左岸16

最新推荐文章于 2024-04-09 18:47:28 发布

阅读量467

点赞数

分类专栏： JavaScript Promise 文章标签： javascript 异步

本文链接：https://blog.csdn.net/Phoebe_16/article/details/78547595

版权

JavaScript 同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

Promise

1 篇文章 0 订阅

订阅专栏

本文探讨了JavaScript中的Promise构造函数及其在异步操作中的作用。通过示例展示了Promise如何封装异步操作，使用then方法进行链式调用处理回调。同时提到了Promise.all用于处理多个Promise实例的并行执行。

摘要由CSDN通过智能技术生成

Promise是一个构造函数

var p = new Promise(function(resolve, reject) {
    // 异步操作
    setTimeout(function() {
        console.log('success');
        resolve('async data');
    }, 2000);
}).then((data) => {
    console.log(data);
});

运行代码，会在2秒后输出“success”和“async data”。注意！我只是new了一个对象，并没有调用它，我们传进去的函数就已经执行了，这是需要注意的一个细节。所以我们用Promise的时候一般是包在一个函数中，在需要的时候去运行这个函数。

function runAsync() {
    var p = new Promise(function(resolve, reject) {
        // 异步操作
        setTimeout(function() {
            console.log('success');
            resolve('async data');
        }, 2000);
    }).then((data) => {
        console.log(data);
    });
    return p;
}

runAsync();

Promise构造函数之后仍然返回一个Promise对象，调用then方法，then()接收一个函数类型的参数，并且会拿到在调用resolve方法传递的数据。then()其实就跟我们平时说的回调函数是同一个意思，在异步操作之后被执行。这就是Promise的作用了，简单来讲，就是能把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。

Promise的优势在于，可以在then方法中继续写Promise对象并返回，然后继续调用then来进行回调操作。

function runAsync() {
    var p = new Promise(function(resolve, reject) {
        // 异步操作
        setTimeout(function() {
            console.log('success');
            resolve('async data');
        }, 2000);
    })
    return p;
}

runAsync().then((data) => {
    console.log('successed result: ' + data);
});

运行这个js文件，在2秒后输出”success” 和”successed result: async data”。

在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了。

function runAsync1() {
    var p = new Promise(function(resolve, reject) {
        setTimeout(function() {
            console.log('async task 1 success');
            resolve('output data1');
        }, 2000);
    });
    return p;
}

function runAsync2() {
    var p = new Promise(function(resolve, reject) {
        setTimeout(function() {
            console.log('async task 2 success');
            resolve('output data2');
        }, 2000);
    });
    return p;
}

function runAsync3() {
    var p = new Promise(function(resolve, reject) {
        setTimeout(function() {
            console.log('async task 3 success');
            resolve('output data3');
        }, 2000);
    });
    return p;
}

runAsync1().then(function(data) {
    console.log(data);
    return runAsync2();
}).then(function(data) {
    console.log(data);
    return 'return a string not a promise!'
}).then(function(data) {
    console.log(data);
});

输出结果：

async task 1 success
output data1
async task 2 success
output data2
return a string not a promise!

失败的回调函数reject和resolve类似，传递一个参数，当执行失败时将对应的数据传递过去。

Promise.all

function resolve(millis, value) {
    return new Promise(resolve => setTimeout(() => resolve(value), millis));
}
Promise.all([
    resolve(5000, 1),
    resolve(6000, 2),
    { hello: 3}
 ]).then(values => console.log(values));
 // [1, 2, { hello: 3 }]