JS 异步操作 Promise对象学习笔记

2024-01-11 18:32:16

在学习JS的时候没看es6的部分导致自己写和看别的代码时很吃力，今天遇到了异步的问题，在听了QQ群里的老哥指导和看了菜鸟教程和一位博主的博客后有了点理解趁热写下来，纯属个人理解要是有什么理解不对的地方还请大佬给指正一下。
1、JavaScript 异步编程
与之前学过的语言不太相同的是，JS含有异步的概念。浏览器在执行JS代码时有且只有一条主线程，按行顺序执行代码，但是主线程可以发射一个子线程出来辅助做一些其他事情。有的时候我们处理一件事情的时候是有步骤的，步骤二只能在步骤一执行完了才能继续。要是有一个大文件要上传或下载，主线程就会一直卡在上传或下载那个地方，这样页面就因为主线程被占用失去响应。因为主线程可以发射一个子线程，所以可以把这个文件上传或下载的活交给子线程来干，这样页面不会失去响应。
但是子线程有一个局限：一旦发射了以后就会与主线程失去同步，我们无法确定它的结束，如果结束之后需要处理一些事情，比如处理来自服务器的信息，我们是无法将它合并到主线程中去的。
2、Promise对象
Promise是ES6新特性，构造一个Promise对象

new Promise（function（resolve，reject）{
//这里写要做的事情
}）

2.1认识Promise对象
它有三种状态
未决定的：pending
成功：resolve、fulfilled
失败：rejected
它也有两个参数，且这两个参数都是函数调用resolve表示一切正常，而且可以向后续的异步操作里传递参数，但是它只在第一层异步可以用就是

function（resolve，reject）{
//只在这里可以用
}

reject函数表示出现异常时调用

new Promise(function (resolve, reject) {
    var a = 0;
    var b = 1;
    if (b == 0) reject("Divide zero");
    else resolve(a / b);
}).then(function (value) {
    console.log("a / b = " + value);
}).catch(function (err) {
    console.log(err);
}).finally(function () {
    console.log("End");
});

当分母为0时执行了reject（）函数。
在执行过程中发现了Promise有两个属性[[PromiseState]]: “fulfilled”
[[PromiseResult]]: undefined
前面说到promise有三种状态，promise对象的PromiseState属性表示promise的状态。
1、刚创建时promisestate为pending，promiseresul为空。

2、当Promise构造回调函数中调用resolve方法时，Promise对象的PromiseState属性变为fulfilled，PromiseResult属性变为resolve方法的参数
当Promise构造回调函数中调用reject方法时，Promise对象的PromiseState属性变为rejected，PromiseResult属性变为reject方法的参数。

promise的方法
Promise类有.then() .catch() >finallu()三个方法，这三个方法的参数都是一个函数。then（）可以将参数中的函数添加到当前 Promise 的正常执行序列，.catch() 则是设定 Promise 的异常处理序列，.finally() 是在 Promise 执行的最后一定会执行的序列。 .then() 传入的函数会按顺序依次执行，有任何异常都会直接跳到 catch 序列：

new Promise(function (resolve, reject) {
    console.log(1111);
    resolve(2222);
}).then(function (value) {
    console.log(value);
    return 3333;
}).then(function (value) {
    console.log(value);
    throw "An error";//这句的功能和reject（“An error”相同）
}).catch(function (err) {
    console.log(err);
});

resolve() 中可以放置一个参数用于向下一个 then （下一步操作）传递一个值，then 中的函数也可以返回一个值传递给 then。但是，如果 then 中返回的是一个 Promise 对象，那么下一个 then 将相当于对这个返回的 Promise 进行操作

function print(delay, message) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log(message);
            resolve();
        }, delay);
    });
}
print(1000, "First").then(function () {
    return print(4000, "Second");
}).then(function () {
    print(3000, "Third");
});

这种返回值为一个 Promise 对象的函数称作 Promise 函数，它常常用于开发基于异步操作的库

reject() 参数中一般会传递一个异常给之后的 catch 函数用于处理异常。

但是要注意以下两点：

resolve 和 reject 的作用域只有起始函数，不包括 then 以及其他序列（前面说过）；
resolve 和 reject 并不能够使起始函数停止运行，别忘了 return。
回到主线程的方法
前面说了异步能不能返回到主线程里，但是在async和await的帮助下我们是可以回到主线程的
异步函数 async function 中可以使用 await 指令，await 指令后必须跟着一个 Promise，异步函数会在这个 Promise 运行中暂停，直到其运行结束再继续运行。

异步函数实际上原理与 Promise 原生 API 的机制是一模一样的，只不过更便于程序员阅读。
如果 Promise 有一个正常的返回值，await 语句也会返回它：

async function asyncFunc() {
    let value = await new Promise(
        function (resolve, reject) {
            resolve("Return value");
        }
    );
    console.log(value);
}
asyncFunc();

输出结果Return value

本文参考并引用了菜鸟教程www.runoob.com
和这位博主的文章https://blog.csdn.net/qq_45895576/article/details/114479795

码农公寓

相关文章