ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

JavaScript 标准内置对象Promise使用学习总结

2021-06-01 10:51:48  阅读:353  来源: 互联网

标签:resolve console 函数 err JavaScript 内置 Promise reject 执行


Javascript标准内置对象Promise使用学习总结

 

by:授客 QQ1033553122

 

  1. 1.   基础用法

var condition = true;

let p = new Promise(function(resolve, reject){ // resolve, reject为两个回调函数,分别供使用者在函数执行成功和执行失败时调用

if (condition) { // 一些执行成功、失败的判断条件,暂且使用上述变量替代

    // throw "exception"; // 如果此处代码代码未注释,即抛出异常,该异常值 exception将被传递给promiseObj.then函数参数列表中第二个参数--一个回调函数

        resolve("执行成功"); // 如果resolve函数被调用,其函数实参将被传递给promiseObj.then函数参数列表中第一个参数--一个回调函数

} else {

    // throw "exception"; // 如果此处代码代码未注释,即抛出异常,该异常值 exception将被传递给promiseObj.then函数参数列表中第二个参数--一个回调函数

        reject("执行失败"); // 如果reject函数被调用,其函数实参将被传递给promiseObj.then函数参数列表中第二个参数--一个回调函数

    }

})

 

p.then((data) => { // then函数接收两个参数--两个函数,分别在构造Promise对象定义的匿名函数(假设为func1)执行成功和执行失败时被调用(func1函数中,resolve被调用表示匿名函数执行成功,reject被调用、或者函数于resolve,reject被执行前,抛出了异常,表示匿名函数执行失败),第一个函数的参数接收来自resolve函数的实参,第二个函数的参数接收来自reject函数的实参、或者是函数抛出的异常值(异常优先于reject、resolve被抛出)

        console.log(data);

    }, (err) => {

        console.log(err);

    }

)

 

运行结果,控制台输出:

执行成功

 

  1. 2.   链式调用之.then

function testFunc(condition){

    new Promise(function(resolve, reject){

        if (condition) {

            resolve("执行成功");

         } else {

            reject("执行失败");

         }

    }).then((data) => {

        console.log(data); 

        return "then执行成功";

    }, (err) => {

        console.log(err);

        return "then执行失败";

}).then(data => {//此处then函数接收两个参数--两个函数,分别在前一个then函数执行成功和执行失败时被调用。(前一个then函数参数列表中任意一个函数被调用,并且执行没抛出异常,表示执行成功,否则表示执行失败)。第一个函数的参数接收来自前一个then函数执行成功时的函数返回值,如果没有返回值则为undefined,第二个函数的参数接收来自前一个then函数执行失败时的函数返回值,如果没有返回值则为undfined,或者是then函数执行时抛出的异常值。

console.log("error:" + data);

    }, err => {

        console.log(err);

    })

}

 

 

testFunc(true)

运行结果,控制台输出:

"执行成功"

"then执行成功"

 

testFunc(false)

"执行失败"

"error:then执行失败"

 

  1. 3.   链式调用之.catch

.catch将在new Promise时定义的匿名函数执行失败、.then函数执行失败,并且位于其后的then函数没有显示提供第二个参数(供失败时调用的函数)时被调用。可以简单理解为用于捕获前面发生的,且没有被任何then函数处理的错误。

 

1

function testFunc(condition){

    new Promise(function(resolve, reject){

        if (condition) {

            resolve("执行成功");

         } else {

            reject("执行失败");

         }

    }).then(data => {

        console.log(data);

    }, err => {

        console.log(err);

    }).catch(err => {

        console.log("error:" + err)

    })

}

 

testFunc(false);

 

运行结果,控制台输出:

"执行失败"

 

2

function testFunc(condition){
    new Promise(function(resolve, reject){ 
        if (condition) { 
            resolve("执行成功"); 
         } else {
            reject("执行失败");
         }
    }).then((data) => { 
        console.log(data);  
        return "then执行成功";
    }).then(data => {
        console.log(data); 
    }).catch(err => {
        console.log("error:" + err)
    })
}
 
testFunc(false);
 
运行结果,控制台输出:
"error:执行失败"
 

3

function testFunc(condition){
    new Promise(function(resolve, reject){ 
        if (condition) { 
            resolve("执行成功"); 
         } else {
            reject("执行失败");
         }
    }).catch(err => {
        console.log("error:" + err)
    })
}
 
testFunc(false)
 
运行结果,控制台输出:
"error:执行失败"
 
 
  1. 4.   Promise.all
Promise.all(iterable) 方法返回一个 Promise 实例,此实例在 iterable 参数内所有的 promise 都“完成(resolved)”或参数中不包含 promise 时回调完成(resolve);如果参数中  promise 有一个失败(rejected),此实例回调失败(reject),失败原因的是第一个失败 promise 的结果
 
例:
function testFunc1(condition){
    return new Promise(function(resolve, reject){ 
        if (condition) { 
            resolve("testFunc1执行成功"); 
         } else {
            reject("testFunc1执行失败");
         }
    });
}
 
function testFunc2(condition){
    return new Promise(function(resolve, reject){ 
        if (condition) { 
            resolve("testFunc2执行成功"); 
         } else {
            reject("testFunc2执行失败");
         }
    });
}
 
let result = Promise.all([testFunc2(true), testFunc1(true)]);
result.then((data) => {
    console.log(data) 
}).catch(err => {
    console.log(err);
})
 
运行结果,控制台输出如下内容:
Array ["testFunc2执行成功", "testFunc1执行成功"]
 
let result = Promise.all([testFunc2(false), testFunc1(true)]);
result.then((data) => {
    console.log(data) 
}).catch(err => {
    console.log(err);
})
 
运行结果,控制台输出如下内容:
"testFunc2执行失败"
 
说明:可以利用.all的特性,以并行执行多个异步操作,并且在一个回调中处理所有的返回数据(返回数据的顺序和传入参数数组的顺序对应)
 
参考链接:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
 

标签:resolve,console,函数,err,JavaScript,内置,Promise,reject,执行
来源: https://blog.51cto.com/u_15241346/2839315

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有