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

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

 

by:授客 QQ：1033553122

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