写点东西《面向初学者的 JavaScript 中的 Promise》

发布时间:2024年01月22日

在 javascript 中使用异步代码时,有时需要等待代码返回数据,然后再进一步处理数据。

例如:读取文件需要一些时间,或者从服务器获取数据可能需要时间,因为这是异步任务,所以它被委托了。

然而,在我们的代码中处理和做任何进一步的事情之前,我们需要这些数据。

这就是 promises 可以非常有帮助的地方。

什么是 Promise?

在引入 promises 之前,异步操作的管理是使用回调函数完成的。

回调函数是作为参数传递给另一个函数的函数,并在异步操作完成后执行。

然而,随着程序变得越来越复杂,管理回调函数变得具有挑战性,导致了人们常说的“回调地狱”或“厄运金字塔”。

这种情况是嵌套回调使代码难以阅读和维护。

引入 promises 是为了解决这些问题,并提供一种更好/更干净的方式来处理异步操作。

简而言之,如果异步任务成功完成,它会返回一个包含数据的结果对象,如果任务失败,它会返回一个包含错误的拒绝对象。Promise 确保一旦操作完成,您可以根据操作的完成或失败执行任何您想要的操作。

Promise 的状态

Promise 有三种状态:

  1. pending:Promise 正在等待,既未解决也未拒绝
  2. resolved:一旦 Promise 解决,它会将数据返回给 then() 方法
  3. rejected:一旦 Promise 被拒绝,错误将返回给 catch()

Promise 的基本示例用法:

// Creating a promise 
let myPromise = new Promise((resolve, reject) => {
    // Simulating async operation using setTimeout
    setTimeout(() => {
        let success = true;
        if (success) {
            resolve("Data fetched successfully");
        } else {
            reject("Error fetching data");
        }
    }, 2000);
});

这段代码表示创建了一个新的 Promise,它执行异步操作(例如 setTimeout() ),一旦完成,它要么解决 Promise(表示成功),要么因错误而被拒绝。

创建 Promise 后,您可以使用该 Promise。

// Consuming the promise
myPromise
.then((result) => {
    console.log(result);
})
.catch((error) => {
  console.error(error);
})
//default one, gets executed no matter resolve or reject
.finally(() => {});

如果 Promise 已解决,则将其返回给该 Promise 的 .then() 方法,如果 Promise 被拒绝,则将其返回给 .catch() 方法。

在两种情况下,您都可以在承诺完成后执行任务。

如何处理承诺返回的数据?

这可以通过 then() 和 catch() 的链式调用来完成

一旦从 resolve 返回数据,您就可以在 then() 方法中获取该数据,然后将其返回到新的 then 链中,然后您可以使用该数据,并且错误由 catch() 方法捕获。

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {}
       const error = false;
        console.log("Async task completed!");
        //data returned with resolve
        if(error === false) resolve([1,2,3]);
, 1000);
});

//handling data with chaining of then() and catch()
promise.then((data) => {
    return response;
})
.then((data) => {
    console.log(data.splice(0, 1));
})
.catch((err) => {
    console.log(err);
})


🌟更多精彩

点击👉这里~~

文章来源:https://blog.csdn.net/l316278750/article/details/135741227
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。