《尚硅谷Web前端Promise教程从入门到精通》系列博客

文章目录

前言
Promise 关键问题

前言

为学习axios打基础。本尚硅谷Web前端Promise教程从入门到精通系列博客内容介绍。
Promise是ES6引入的进行异步编程的新的解决方案，从语法上说它是一个构造函数，可以封装异步的任务，并且可以对结果进行处理。Promise最大的好处在于可以解决回调地狱的问题，并且在指定回调和处理错误方面更加灵活，在Web或者App项目中应用十分广泛，无论前端还是后端都可以看到Promise的身影，且是现在面试的高频题目，想进入一线大厂必须掌握Promise内部运行的原理。
尚硅谷Web前端Promise教程从入门到精通系列博客主要包含以下五部分：Promise 介绍与基本使用、Promise API、Promise 关键问题、Promise 自定义封装、async 与await。

提示：以下是本篇文章正文内容，下面案例可供参考

Promise 关键问题

1.在代码中如何改变Promise对象的状态。

(1) resolve(value): 如果当前是 pending 就会变为resolved
(2) reject(reason): 如果当前是 pending 就会变为rejected
(3) 抛出异常: 如果当前是pending就会变为rejected

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise关键问题 - Promise 对象状态改变的方式</title>
</head>
<body>
    <script>
        let p = new Promise((resolve, reject) => {
     
            //1. resolve 函数
            resolve('ok'); // pending   => fulfilled (resolved)
        });
        console.log(p);
        let p_2 = new Promise((resolve, reject) => {
     
            //2. reject 函数
            reject("error");// pending  =>  rejected 
        });
        console.log(p_2);
        let p_3 = new Promise((resolve, reject) => {
     
            //3. 抛出错误
            throw '出问题了';
        });
        console.log(p_3);
    </script>
</body>
</html>

在这里插入图片描述

2.一个promise 指定多个成功/失败回调函数, 都会调用吗?

当promise 改变为对应状态时都会调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise关键问题 - Promise 指定多个回调</title>
</head>
<body>
    <script>
        let p = new Promise((resolve, reject) => {
     
            // resolve('OK');
        });
        ///指定回调 - 1
        p.then(value => {
     
            console.log(value);
        });
        //指定回调 - 2
        p.then(value => {
     
            alert(value);
        });
    </script>
</body>
</html>