自学内容网 自学内容网

JavaScript的promise异步操作解决问题学习

什么是promise

在 JavaScript 中,Promise 是一种用于处理异步操作的对象。它表示一个尚未完成的操作,但可以在未来某个时间点完成或失败。Promise 使得异步代码更加简洁和直观,尤其是在需要处理多个回调函数时,它可以有效避免回调地狱(callback hell)。

Promise 的三种状态:

Pending(待定)
Promise 刚创建,操作尚未完成,此时既没有成功,也没有失败。
Fulfilled(已完成)
异步操作成功完成,Promise 返回成功结果。
Rejected(已拒绝):
异步操作失败,Promise 返回失败原因。

Promise 的基本用法

创建

    // 异步操作
    let success = true;

    if (success) {
        resolve("操作成功");
    } else {
        reject("操作失败");
    }
});
//在这个例子中,resolve 用于表示操作成功,reject 用于表示操作失败。

Promise 构造函数接收一个执行函数(executor),该函数有两个参数:resolve 和 reject。

Promise 的使用(then 和 catch)

promise
    .then(function(result) {
        console.log("成功:", result);
    })
    .catch(function(error) {
        console.log("失败:", error);
    });
//.then() 方法在 Promise 成功时调用,并接收成功结果作为参数。
//.catch() 方法在 Promise 失败时调用,并接收失败原因作为参数。

Promise 的使用(使用async 和 await)

async/await 是 JavaScript 中用于处理异步操作的语法糖,它建立在 Promise 的基础之上,使得异步代码看起来更像同步代码,从而提高代码的可读性和可维护性

async function fetchDataAsync() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchDataAsync();

async 函数:在函数声明前添加 async 关键字,表明这个函数是异步的。async 函数默认返回一个 Promise,即使函数内部没有显式返回 Promise 对象。

await 表达式:只能在 async 函数内部使用,用于等待一个 Promise 被解决(resolved)或拒绝(rejected)。await 会暂停 async 函数的执行,直到 Promise 处理完成,然后返回结果。

Promise 链式调用

Promise 的强大之处在于它支持链式调用,使得多个异步操作可以顺序执行,而不用陷入回调嵌套的困境。例如:

let promise = new Promise(function(resolve, reject) {
    setTimeout(() => resolve(1), 1000); // 模拟异步操作
});

promise
    .then(function(result) {
        console.log(result); // 1
        return result * 2;
    })
    .then(function(result) {
        console.log(result); // 2
        return result * 2;
    })
    .then(function(result) {
        console.log(result); // 4
    });

//例子中,每个 .then() 都返回一个新的 Promise,并将结果传递给下一个 .then(),这就是链式调用的原理

Promise 的重要方法

Promise.all()

Promise.all() 方法接收一个包含多个 Promise 的数组,只有当所有 Promise 都成功时,它才会返回成功结果;如果其中一个失败,则整个 Promise.all() 失败。

let promise1 = Promise.resolve(3);
let promise2 = new Promise((resolve, reject) => setTimeout(resolve, 1000, 'foo'));
let promise3 = 42;

Promise.all([promise1, promise2, promise3])
    .then((values) => {
        console.log(values); // [3, 'foo', 42]
    });

Promise.race()

Promise.race() 返回第一个完成(无论成功还是失败)的 Promise

let promise1 = new Promise((resolve, reject) => setTimeout(resolve, 500, "第一个"));
let promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, "第二个"));

Promise.race([promise1, promise2])
    .then((result) => {
        console.log(result); // 第二个
    });

Promise.allSettled()

Promise.allSettled() 不管是成功还是失败,它都会等待所有的 Promise 完成,并返回每个 Promise 的结果状态

let promise1 = Promise.resolve("成功");
let promise2 = Promise.reject("失败");

Promise.allSettled([promise1, promise2])
    .then((results) => results.forEach((result) => console.log(result)));

结果:
{ status: ‘fulfilled’, value: ‘成功’ }
{ status: ‘rejected’, reason: ‘失败’ }

关于更多promise的介绍,大家可以去看《你所不知道的JavaScript》中册


原文地址:https://blog.csdn.net/qq_55018264/article/details/142874115

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!