Skip to content

Latest commit

 

History

History
143 lines (92 loc) · 3.49 KB

15.Promise、Async、Await、then.md

File metadata and controls

143 lines (92 loc) · 3.49 KB

Promise、Async、Await、Then

Promise

Promise的中文意思是承诺。可以通俗的理解为: 把这个任务(函数)交给我,我来完成。

Promise是JavaScript中用于处理异步操作的一个关键概念。

它代表了一个尚未完成但预期在将来完成的操作。

使用Promise可以避免所谓的回调地狱,即多层嵌套的回调函数,从而使代码更加清晰和易于维护。

let promise = new Promise(function(resolve, reject) {
    // 异步操作代码
    setTimeout(() => {
        resolve("操作成功");
    }, 1000);
});

promise.then((value) => {
    console.log(value);
});

一个Promise有三种可能的状态:

  • pending(待定): 初始状态,即不是成功,也不是失败
  • fulfilled(已实现): 意味着操作成功完成
  • rejected(已拒绝): 意味着操作失败
let fulfilledPromise = Promise.resolve('成功');
let rejectedPromise = Promise.reject('失败');

fulfilledPromise.then(value => console.log(value));  // 输出成功
rejectedPromise.catch(error => console.log(error));  // 输出失败

链式调用和错误处理

Promise的另一个优点是可以通过链式调用.then()和.catch()方法来处理复杂的异步流程。

new Promise((resolve, reject) => {
    setTimeout(() => resolve(1), 1000)
})
.then(result => {
    console.log(result);  // 输出1
    return result * 2;
})
.then(result => {
    console.log(result);  // 输出2
    return result * 3;
})
.then(result => {
    console.log(result);  // 输出3
    return result * 4;
})
.catch(error => {
    console.log('error')
});

Async/Await

Async和Await是建立在Promise之上的高级抽象,使得异步代码的编写和阅读更加接近于同步代码的风格。

Async

通过在函数声明前加上async关键字,可以将任何函数转换为返回Promise的异步函数。

这意味着你可以使用.then()和.catch()来处理它们的结果。

async function asyncFunction() {
    return "异步操作完成";
}

asyncFunction().then(value => console.log(value));  // 异步操作完成

Await

await关键字只能在async函数内部使用。

它可以暂停async函数的执行,等待Promise的解决(resolve),然后以Promise的值继续执行函数。

async function asyncFunction() {
    let promise = new Promise((resolve, rejct) => {
        setTimeout(() => resolve("完成"), 1000)
    });

    let result = await promise;  // 等待,直到promise解决
    console.log(result);
}

asyncFunction();

使用await可以像同步代码一样处理异步任务,避免了过多的.then()嵌套。

所有await必须放在async函数中。

错误处理

在async/await中,错误处理可以通过传统的try...catch语句实现,这使得异步代码的错误处理更加直观。

async function asyncFunction() {
    try {
        let response = await fetch('http://example.com');
        let data = await response.json();
     } catch (error) {
        console.log('error');
     }
}

asyncFunction();

在实际应用中,async和await使得处理复杂的异步逻辑更加简单,尤其是在涉及多个依次执行的异步操作时。

虽然async/await在很多情况下可以提供更加清晰和简洁的代码,但Promise也有其独特的优势。

例如,处理多个并行异步操作时,需要并行执行并等待它们全部完成,使用Promise.all()通常是更好的选择。