JavaScript 异步 & Promise 学习心得

文章目录

• • Promise

Promise

1、基本用法

Promise 对象代表一个异步操作，它有三种状态：pending（待定状态）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。Promise 是一个构造函数，接收一个函数参数，该函数有两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数

new Promise((resolve, reject) => {
	//最开始Promise的状态是pending
	var isSuccess = true
	if(isSuccess)//判断异步是否执行成功
		resolve("isSuccess == true")//将Promise的状态置为fullfiled
	else
		reject("isSuccess != true")//将Promise的状态置为rejected
}).then(function(value){
	//如果状态为Promise对象的状态为fullfiled，执行then方法
	//then方法的参数为一个函数，该函数的参数是resolve方法传进的参数
	console.log(value + "：异步操作成功")
}).catch(function(err){
	//如果状态为Promise对象的状态为rejected，执行catch方法
	//catch方法的参数为一个函数，该函数的参数是reject方法传进的参数
	console.log(err + "：异步操作失败")
}).finally(function(){
	//最后会执行finally方法
	console.log("最后的操作")
})

2、all 的用法

all 方法接收一个数组参数，里面的值都是 Promise 对象。成功的话所有异步操作的 resolve 方法传入的参数都传给了 then 方法里的数组类型参数 results，而失败的话则将最先执行的 reject 方法传入的参数传给 catch 方法的参数 result

function runAsync1(){
    var p = new Promise((resolve, reject) => {
        //做一些异步操作
        setTimeout(function(){
            console.log('异步任务1执行完成');
            resolve('resolve函数传参1');
			//reject('reject函数传参1')
        }, 1000);
    });
    return p;
}
function runAsync2(){
    var p = new Promise((resolve, reject) => {
        //做一些异步操作
        setTimeout(function(){
            console.log('异步任务2执行完成');
            resolve('resolve函数传参2');
			//reject('reject函数传参2')
        }, 1000);
    });
    return p;
}
//上面这两种返回值为一个Promise对象的函数称作Promise函数
//它常常用于开发基于异步操作的库
Promise.all([runAsync1(), runAsync2()])//传入两个Promise对象
.then(results => {//results是传入的所有resolve方法传入参数组成的数组
    console.log(results);
}).catch(result => {//result是all方法传入的Promise对象第一个reject方法传入的参数
	consold.log(result)
});

执行结果如下：

异步任务1执行完成
异步任务2执行完成
[“resolve函数传参1”, “resolve函数传参2”]

如果注释掉 resolve 方法，删去 reject 方法的注释，可得到执行结果如下：

异步任务1执行完成
reject函数传参1
异步任务2执行完成

3、async / await 用法

async 是一个函数的修饰符，有 async 修饰的函数自动包装为 Promise 对象并返回，并且如果有返回值，则返回值作为 resolve 方法的参数。以下两种等价

async function fun(){
	return "value"
}

function fun(){
	return new Promise(resolve => {
		resolve('value')
	})
}

await 后面跟的一般是一个 Promise 对象，await 只能出现在 async 修饰的函数内，await 会阻塞后面的代码，直到 await 后面的 Promise 对象执行 resolve 方法，的到 resolve 方法传入的参数作为 await 的运算结果。这也是为什么 await 只能出现在 async 函数中，async 函数调用不会造成阻塞，它内部所有的阻塞都被封装在一个 Promise 对象中异步执行

function print(delay, message) {
    return new Promise((resolve, reject) => {
        setTimeout(function () {
            console.log(message);
            resolve();
        }, delay);
    });
}

print(3000, "First").then(function () {
    return print(2000, "Second");
}).then(function () {
    print(1000, "Third");
});

可使用 await 优化为

async function asyncFunc() {
    await print(3000, "First");
    await print(2000, "Second");
    await print(1000, "Third");
}
asyncFunc();

执行结果：

First
Second
Third

前面是 Promise 对象执行 resolve 方法的情况，而如果是执行 reject 方法的话，可以用 try-catch 块处理

async function asyncFunc() {
    try {
        await new Promise(function (resolve, reject) {
            reject("error")//或者 throw "Some error"
        });
    } catch (err) {
        console.log(err);
    }
}
asyncFunc();

执行结果：

error

本文地址：https://blog.csdn.net/weixin_40439454/article/details/109633084