前端 JavaScript 异步函数怎么使用

异步JavaScript函数主要通过Promise对象、async/awAIt语法和回调函数实现。Promise对象是常用的异步编程解决方案，它表示一个尚未完成但预期将来会完成的操作的结果。在Promise出现之前，回调函数是纯异步JavaScript代码中的标准做法。而随着ES2017的推出，async/await语法让异步代码的写法变得更加优雅和易于理解。其中，Promise是理解这些技术的基础，因为async/await实际上是基于Promise的语法糖。

一、PROMISE 对象

创建Promise

要创建一个Promise对象，需要使用new Promise()构造函数，并传入一个执行器函数作为参数。执行器函数接受两个函数作为参数：resolve和reject，用于决定Promise的状态。

let promise = new Promise((resolve, reject) => {
    // 异步操作
    if (/* 操作成功 */) {
        resolve(value); // 成功时调用此函数
    } else {
        reject(error); // 失败时调用此函数
    }
});

使用Promise

在Promise对象创建后，可以使用.then()、.catch()和.finally()方法来处理成功的结果或捕捉错误。

promise.then(
    result => { /* 处理成功的结果 */ },
    error => { /* 处理错误 */ }
);
// 或者使用链式调用
promise
    .then(result => { /* 处理成功的结果 */ })
    .catch(error => { /* 处理错误 */ })
    .finally(() => { /* 总会执行 */ });

二、CALLBACK 函数

异步回调

回调函数是在某个特定的异步操作完成时被调用的函数。在JavaScript中，经常用回调函数处理例如事件监听、定时器或执行异步网络请求等操作。

function asyncFunction(callback) {
    // 异步操作，如setTimeout
    setTimeout(() => {
        // 操作完成后调用回调函数
        callback('result');
    }, 1000);
}
asyncFunction(result => { /* 使用结果 */ });

回调地狱

一个主要缺点是回调嵌套过多会导致所谓的回调地狱，使代码难以阅读和维护。

login(userId, function(error, userInfo) {
    if (error) {
        //处理错误
    } else {
        getUserPermissions(userInfo, function(error, permissions) {
            if (error) {
                //处理错误
            } else {
                // 依次类推
            }
        });
    }
});

三、ASYNC/AWAIT 语法

async函数

通过在函数声明前添加async关键字，可以将任何一个函数转换为异步函数。异步函数总是返回一个Promise对象。

async function asyncFunction() {
    return 'Hello World';
}
asyncFunction().then(result => { /* 使用返回的结果 */ });

await表达式

在async函数内部，可以使用await关键字暂停函数执行，等待Promise解决。这使得异步代码看起来和同步代码相似。

async function fetchData() {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    return data;
}
fetchData().then(data => { /* 使用数据 */ });

四、PROMISE 高级应用

链式调用

链式调用是Promise的一个重要特性，它允许在 .then() 中返回另一个Promise，从而可以创建一个操作序列。

fetch('/user.json')
    .then(response => response.json())
    .then(user => fetch(`/permissions/${user.id}`))
    .then(response => response.json())
    .then(permissions => { /* 处理权限 */ });

Promise并发控制

Promise.all() 方法用于处理多个Promise并发执行的情况。

let promises = [fetch(url1), fetch(url2)]; // 创建一个promise数组
Promise.all(promises)
    .then(results => {
        // results数组包含所有Promise的结果
        return results.map(response => response.json());
    })
    .then(dataArray => { /* 使用所有的数据 */ });

提供了一种组合或等待多个异步操作的结果的强大方法。

利用这些基本概念和函数，前端开发者可以有效地在JavaScript中管理和使用异步函数，在这个过程中创建更加动态和响应式的用户界面。