JavaScript 什么是异步API

异步API 在现代开发中广泛应用，因为它们能够同时处理多个请求，从而改善了整体用户体验。在本文中，我们将介绍异步API的定义、优势以及如何实现它们。

什么是异步API

异步API是一种网络服务，用户可以同时发起多个请求，而无需等待前一个请求执行完毕。这意味着服务器可以同时处理多个请求，从而降低API的响应时间。异步API通常在涉及大量请求或处理时间较长的场景下使用，例如数据密集型应用程序。

异步API的优势：

• 提升性能： 可以处理多个请求，从而提高应用程序的整体性能。
• 可扩展性： 异步API具有极高的可扩展性，意味着随着应用程序的扩大，它们可以处理越来越多的请求。这是因为服务器可以并行处理请求，降低总体响应时间。
• 资源效率： 与同步API相比，异步API需要更少的资源来处理多个请求。这意味着开发人员可以构建更高效和成本效益的应用程序。

实现异步API的方法：

• 回调函数
• Promises
• Async/Await
• 使用setTimeout()

以下是异步API的代码实现：

使用回调函数： 使用回调函数从API获取用户数据，处理成功和错误情况：

Javascript

function getUserData(userId, callback) { 
    const xhr = new XMLHttpRequest(); 
    xhr.open('GET',  
`https://...com/users/${userId}`); 
    xhr.onload = () => { 
        if (xhr.status === 200) { 
            callback(null, JSON.parse(xhr.responseText)); 
        } else { 
            callback('Error: ' + xhr.statusText); 
        } 
    }; 
    xhr.onerror = () => { 
        callback('Error: ' + xhr.statusText); 
    }; 
    xhr.send(); 
} 
  
getUserData(1, (error, userData) => { 
    if (error) { 
        console.error(error); 
    } else { 
        console.log(userData); 
    } 
});

输出：

使用 promises： 使用一个 Promise 从 API 获取用户数据，该 Promise 会解决成功返回结果或拒绝并返回错误消息。

Javascript

function getUserData(userId) { 
    return new Promise((resolve, reject) => { 
        const xhr = new XMLHttpRequest(); 
        xhr.open('GET',  
`https://...com/users/${userId}`); 
        xhr.onload = () => { 
            if (xhr.status === 200) { 
                resolve(JSON.parse(xhr.responseText)); 
            } else { 
                reject('Error: ' + xhr.statusText); 
            } 
        }; 
        xhr.onerror = () => { 
            reject('Error: ' + xhr.statusText); 
        }; 
        xhr.send(); 
    }); 
} 
  
getUserData(1) 
    .then(userData => console.log(userData)) 
    .catch(error => console.error(error));

输出：

使用async/await： 使用async/await语法从API获取用户数据，等待响应并使用try/catch块处理错误。

Javascript

async function getUserData(userId) { 
    const response = await fetch(`https://...com/users/${userId}`); 
    if (response.ok) { 
        return await response.json(); 
    } else { 
        throw new Error('Error: ' + response.status); 
    } 
} 
  
(async () => { 
    try { 
        const userData = await getUserData(1); 
        console.log(userData); 
    } catch (error) { 
        console.error(error); 
    } 
})();

输出：

使用setTimeout()： 它是一个javascript函数，允许在指定的时间后执行一个函数

Javascript

console.log('Start'); 
setTimeout(() => { 
    console.log('Async operation'); 
}, 2000); 
console.log('End');

输出：