js异步Promise函数简单使用

最新推荐文章于 2024-03-26 11:04:13 发布

转载最新推荐文章于 2024-03-26 11:04:13 发布 · 1.2k 阅读

转载同时被 2 个专栏收录

12 篇文章

订阅专栏

web开发碎知识

9 篇文章

订阅专栏

本文详细介绍了JavaScript中Promise的基本用法及其实现异步请求的例子。包括如何创建Promise实例、处理成功的resolve回调以及处理失败的reject回调。同时，还展示了如何使用.then()和.catch()方法来处理异步操作的结果。

先附一个连接：http://liubin.org/promises-book/#chapter1-what-is-promise

1.基本用法

var promise = new Promise(function(resolve, reject) {
    // 异步处理
    // 处理结束后、调用resolve 或 reject
});

用法示例1.

function getURL(URL) {
    return new Promise(function (resolve, reject) {
        var req = new XMLHttpRequest();
        req.open('GET', URL, true);
        req.onload = function () {
            if (req.status === 200) {
                resolve(req.responseText);
            } else {
                reject(new Error(req.statusText));
            }
        };
        req.onerror = function () {
            reject(new Error(req.statusText));
        };
        req.send();
    });
}
// 运行示例
var URL = "http://httpbin.org/get";
getURL(URL).then(function onFulfilled(value){
    console.log(value);
}).catch(function onRejected(error){
    console.error(error);
});

1.getURL 只有在通过XHR取得结果状态为200时才会调用 resolve - 也就是只有数据取得成功时，而其他情况（取得失败）时则会调用 reject 方法。

2.resolve(req.responseText) 在response的内容中加入了参数。 resolve方法的参数并没有特别的规则，基本上把要传给回调函数参数放进去就可以了。 ( then 方法可以接收到这个参数值)

3.所以上述的
getURL(URL).then(function onFulfilled(value){
    console.log(value);
}).catch(function onRejected(error){
    console.error(error);
});
的then后面的函数中的value就是resolve的值

4.简便用法：(使用Promise的静态函数，42的值会直接放到then中函数的参数中)，后面可以放很多then，参数都是前一个then中函数的返回值
Promise.resolve(42).then(function(value){
    console.log(value);
});