如何正确的使用Promise

SwordFly 发布于2019-08-26 13:41 / 1493人阅读

摘要：那如何使用进行异步回调如何捕获错误声明函数使用则返回使用则返回错误，并结束的继续向下执行，并会跳到执行过了秒后接收到值返回值可以是数字，字串，对象或者是获得上一个返回的值或返回的的返回值如用到，则会直接跳到此处

promise用法

对比传统回调函数与Pormise的写法

传统回调函数

// 声明函数
function run(callback) {
    let parmas = 0;
    if (callback) callback(parmas);
};
function fnStep1(callback) {
    let parmas = 123;
    if (callback) callback(parmas);
};
function fnStep2(callback) {
    let parmas = 456;
    if (callback) callback(parmas);
};
function fnStep3(callback) {
    let parmas = 789;
    if (callback) callback(parmas);
};
// fnStep4 ... 

// 传统使用回调的写法
run(function (parmas) {
    // parmas = 0
    console.log(parmas);
    fnStep1(function (parmas1) {
        // parmas = 123
        console.log(parmas1);
        fnStep2(function (parmas2) {
            // parmas = 456
            console.log(parmas2);
            fnStep3(function (parmas3) {
                // ...
                // 一直嵌套
            });
        });
    });
});

Promise的写法

let p = new Promise((resolve, reject) => {
    // ?异步操作，最终调用:
    //
    const parmas = 0;
    resolve(parmas); // fulfilled
    // ?或
    //   reject("failure reason"); // rejected
})

p
    .then(
    (parmas) => {
        // parmas，resolve返回的值
        console.log(parmas);
        // 你的代码块 code...
        return 123; //返回值给下一个then
    }
    )
    .then(
    (parmas) => {
        // parmas，上一个then返回的值
        console.log(parmas);
        // 你的代码块 code...
        return 456; //返回值给下一个then
    }
    )
    .then(
    (parmas) => {
        // parmas，上一个then返回的值
        console.log(parmas);
        // 你的代码块 code...
        return 789; //返回值给下一个then
    }
    )

Promise异步回调

Promise要比传统回调函数更简洁直观，可读性更强。

那如何使用Promise进行异步回调? 如何捕获错误？

// 声明函数
function asyncFn(a) {

    return new Promise((resolve, reject) => {
        a += 1;
        setTimeout(function () {
            // 使用resolve则返回a
            resolve(a);
            // 使用reject则返回错误，并结束then的继续向下执行，并会跳到catch
            // reject(new Error("fail"));
        }, 2000);
    });

}

// 执行
asyncFn(1).then(
    (a) => {
        // 过了2秒后接收到a值 => 2
        console.log(a);

        const newVal = 5;
        // const newVal = {a: 5};
        // const newVal = new Promise((resolve, reject) =>{});
        // 返回值可以是数字，字串，对象或者是 Promise
        return newVal;
    }
).then(
    (newVal) => {
        // newVal 获得上一个then返回的值 或 返回的Promise的返回值

    }
).catch(
    (err)=>{
        // 如用到reject，则会直接跳到此处
        console.log(err)
    }
);

云服务器 GPU云服务器 Promise使用如何正确学习javascript 如何正确购买阿里云服务器购买的域名如何使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109314.html

如何正确合理使用 JavaScript async/await ！

摘要：想阅读更多优质文章请猛戳博客一年百来篇优质文章等着你引入的在的异步编程中是一个极好的改进。可能会产生误导一些文章将与进行了比较，并声称它是下一代异步编程风格，对此作者深表异议。结论引入的关键字无疑是对异步编程的改进。 showImg(https://segmentfault.com/img/bVbjFP0?w=800&h=450); 想阅读更多优质文章请猛戳GitHub博客,一年百来篇...

trigkit4 2019-08-23 14:27 评论0 收藏0
Promise 的链式调用与中止

摘要：一是如何链式调用，二是如何中止链式调用。到目前为止，我们就基本了解了的用法及特点，并实现用重构用回调函数写的异步操作。 Abstract 本文主要讲的是如何实现 Promise 的链式调用。也就是 promise().then().then().catch() 的形式，然后讨论如何在某一个 then() 里面中止 Promise。在程序中，只要返回了一个 promise 对象，如果 ...

cuieney 2019-08-20 12:33 评论0 收藏0
如何在 JS 循环中正确使用 async 与 await

摘要：蛤当你尝试在循环中使用时，事情就会变得复杂一些。这意味着循环中的应该按顺序执行。在循环中使用首先，使用对数组进行遍历。在中使用如果在中使用始终返回数组，这是因为异步函数总是返回。在循环中使用当你使用时，希望筛选具有特定结果的数组。 async 与 await 的使用方式相对简单。蛤当你尝试在循环中使用await时，事情就会变得复杂一些。想阅读更多优质文章请猛戳GitHub博客,一年...

liujs 2019-08-23 17:57 评论0 收藏0
读懂 SOLID 的「依赖倒置」原则

这是理解SOLID原则中，关于依赖倒置原则如何帮助我们编写低耦合和可测试代码的第一篇文章。写在前头当我们在读书，或者在和一些别的开发者聊天的时候，可能会谈及或者听到术语SOILD。在这些讨论中，一些人会提及它的重要性，以及一个理想中的系统，应当包含它所包含的5条原则的特性。我们在每次的工作中，你可能没有那么多时间思考关于架构这个比较大的概念，或者在有限的时间内或督促下，你也没有办法实践一些好...

Snailclimb 2019-08-22 13:57 评论0 收藏0
详解JavaScript的任务、微任务、队列以及代码执行顺序

摘要：在微任务期间排队的任何其他微任务都会被添加到队列的末尾并进行处理。因此一个已的调用时将立即把一个微任务加入微任务队列中。和回调被列为微任务。上述规则确保微任务不会中断执行中期的。为了保证的可读性，本文采用意译而非直译。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！思考下面 JavaScript 代码： console.log(script start); ...

rubyshen 2019-08-26 10:20 评论0 收藏0