Promise 使用-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37485347/article/details/146178695

Promise 使用

概念

Promise是异步编程的一种解决方案，他是一个对象，可以获取异步操作的消息，避免了回调地狱

只需要记住下面几个关键词即可

三种状态

Pending（进行中）：初始状态，既不是成功，也不是失败。
Fulfilled（已成功）：意味着操作成功完成。
Rejected（已失败）：意味着操作失败。

是一个对象

案例使用

创建一个小的案例

代码解释
new Promise(executor) 来创建一个Promise实例。executor是一个函数，它接受两个参数：
resolve(成功时调用) 和 reject(失败时调用)

let myPromise = new Promise(function(resolve, reject) {
    // 假设这里是一些异步操作的方法
    // …… ……
    let success = true; // 假设这是异步操作的结果
    if (success) {
        resolve("操作成功"); // 成功时调用
    } else {
        reject("操作失败"); // 失败时调用
    }
});

使用promise对象

myPromise.then(function(result) {
    console.log(result); // 输出: 操作成功
})
.catch(function(error) {
    console.error(error); // 输出: 操作失败
});

这里便可以通过then catch 来进行链式调用，获取成功和失败的内容
这里看得出，resolve reject 其实是信息传递的用途

其实上面的Promise的对象创建，还有一种写法 let myPromise = Promise.resolve("操作成功");

这种属于直接返回一个已经解决的 Promise 对象，没法在里面写逻辑，存在的意义不大

再来看下 Promise.all() 的使用
all 方法接收对象（如数组），其中可以包含 Promise 对象和普通值

let promise1 = Promise.resolve(3);
let promise2 = 42; // 普通值
let promise3 = new Promise((resolve, reject) => {
    setTimeout(() => resolve('foo'), 100);
});

Promise.all([promise1, promise2, promise3])
.then(values => {
    console.log(values); // 输出: [3, 42, "foo"]
})
.catch(error => {
    console.error("Error:", error);
});

上面的代码中

promise1 是一个显式的已解决的 Promise。
promise2 是一个普通值 42，但它会被 JavaScript 自动包装成一个已解决的 Promise。
promise3 是一个需要等待一段时间才能解决的 Promise。

总结下来就是
Promise.all() 会等待所有传入的 Promise 被解决（或任意一个被拒绝），后续可继续进行链式操作，其实也就是批量操作的含义

实际案例

从API获取数据并处理

function getRemoteData(url) {
    console.log(11111)
    return new Promise(function(resolve, reject) {
        console.log(22222)
        fetch(url).then(response => {
            console.log(33333)
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response;
        })
        .then(data => resolve(data))
        .catch(error => reject(error));
    });
}

getRemoteData('http://gips3.baidu.com/it/u=100751361,1567855012&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280')
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

console.log(44444)

getRemoteData方法，返回了一个Promise对象，可以看到，其实 fetch 方法返回的也是一个Promise对象

其输出结果为

11111
22222
44444
33333
file response ……

注意：
js是单线程执行，循环机制，相当于单核CPU，实行时间片切换循环
先执行同步代码，再执行异步代码
虽然说Promise只是一个对象，和异步无直接关系，但后续的 then catch 等是异步等待

如果还是不太理解，看下面的案例

function getRemoteData(url) {
   res = fetch(url)
   console.log(res.then(response => {
        console.log(response)
   }))
}

getRemoteData('http://gips3.baidu.com/it/u=100751361,1567855012&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280')
  
console.log(11111)

先输出 11111 再输出文件

function getRemoteData(url) {
   res = fetch(url)
   console.log(res)
}

getRemoteData('http://gips3.baidu.com/it/u=100751361,1567855012&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280')
  
console.log(11111)

先输出 Promoise 对象，再输出 11111

还记得文档一开始说明的，Promoise对象的三种状态不， console.log(res) 打印出来的即是 pending