如何从异步调用中返回响应

技术背景

在JavaScript编程中，异步操作是常见的需求，如网络请求、文件读取等。然而，异步操作的执行顺序与同步操作不同，这就导致了一个常见的问题：如何从异步调用中返回响应。在传统的同步编程中，函数执行完成后会立即返回结果，但在异步编程中，由于操作需要时间完成，直接返回结果往往会得到undefined。

问题分析

以常见的异步操作（如使用jQuery的ajax函数、Node.js的fs.readFile、fetch API等）为例，尝试直接返回异步操作的结果通常会失败。这是因为异步操作会在后台执行，而函数会继续执行后续代码，在异步操作完成之前就返回了，导致返回的结果是初始值（通常为undefined）。

示例代码

// 使用jQuery的ajax函数
function foo() {
    var result;

    $.ajax({
        url: '...',
        success: function(response) {
            result = response;
            // return response; // <- 尝试返回也无效
        }
    });

    return result; // 总是返回 `undefined`
}

// 使用Node.js的fs.readFile
function foo() {
    var result;

    fs.readFile("path/to/file", function(err, data) {
        result = data;
        // return data; // <- 尝试返回也无效
    });

    return result; // 总是返回 `undefined`
}

// 使用fetch API
function foo() {
    var result;

    fetch(url).then(function(response) {
        result = response;
        // return response; // <- 尝试返回也无效
    });

    return result; // 总是返回 `undefined`
}

解决方案

1. ES2017+：使用async/await结合Promise

async/await是ES2017引入的语法糖，它基于Promise，可以让异步代码看起来像同步代码。async函数总是返回一个Promise，await关键字用于等待Promise的解决或拒绝。

// 使用 'superagent' 库，它会返回一个 Promise
var superagent = require('superagent');

// 定义一个延迟函数
function delay() {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve(42); // 3秒后，使用值 42 解决 Promise
        }, 3000);
    });
}

// 定义一个异步函数
async function getAllBooks() {
    try {
        // 获取当前用户的书籍 ID 列表
        var bookIDs = await superagent.get('/user/books');
        // 等待 3 秒