关于异步Web API调用中回调函数与return差异的技术疑问

首先贴出你提到的代码片段：

const geocode = (address, callback) => { 
  const url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${address}.json?access_token=pk.eyJ1IjoibWVya3VyMTIzIiwiYSI6ImNrYjVndDk3bjBvNGEyeW16cHlid2txZ3YifQ.NGOWOq0yq0wvkhzDzjnUpQ&limit=1`; 
  request({ url, json: true }, (error, response) => { 
    const data = response.body; 
    if (error) { 
      callback('Unable to connect to the Geo API', null); 
    } else if (data.message === 'Not Found' || data.features.length === 0) { 
      callback('Location not found', null); 
    } else { 
      callback(null, { 
        longitude: data.features[0].center[0], 
        latitude: data.features[0].center[1], 
        location: data.features[0].place_name, 
      }); 
    } 
  }); 
}; 

核心原因：JavaScript的异步执行特性 #

这个问题其实戳中了JavaScript异步编程的核心逻辑——咱们先拆解这段代码里的关键行为：request()是一个异步HTTP请求方法。当你调用它的时候，JavaScript引擎不会傻等着网络请求完成，而是会继续执行geocode函数里剩下的代码（如果有的话），然后直接结束geocode函数的执行。

这时候如果把回调换成return会发生什么？

• 你刚触发request，网络请求才刚发出去，geocode函数就已经执行到return语句了，此时服务器还没返回数据，你根本没法拿到正确的经纬度对象，只能返回undefined或者空值。
• 等后面网络请求完成、拿到数据的时候，geocode函数早就执行完了，这时候再想返回数据已经完全来不及了。

回调函数的作用：“等异步操作完了再干活” #

回调函数的本质，就是把你需要在异步操作完成后执行的逻辑打包成一个函数，传递给异步方法（这里就是request）。当异步操作完成——不管是成功拿到数据，还是请求出错——request就会调用你传递的这个回调函数，此时数据已经就绪，你就能在回调里处理正确的结果了。

再说说return的特性 #

return是同步执行的——只要函数执行到return这一行，就会立即终止函数执行并返回值，它不会“等待”任何异步操作完成。它和回调函数的核心区别在于：return是函数执行过程中直接输出结果，而回调是把结果处理逻辑“延后”到异步操作完成时再触发。

额外补充：更优雅的异步方案（可选） #

当然，现在JavaScript里已经有比回调更优雅的异步处理方式了，比如Promise和async/await，不用再写嵌套的回调。比如你这段代码可以改成用Promise封装：

const geocode = (address) => {
  return new Promise((resolve, reject) => {
    const url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${address}.json?access_token=pk.eyJ1IjoibWVya3VyMTIzIiwiYSI6ImNrYjVndDk3bjBvNGEyeW16cHlid2txZ3YifQ.NGOWOq0yq0wvkhzDzjnUpQ&limit=1`;
    request({ url, json: true }, (error, response) => {
      const data = response.body;
      if (error) {
        reject('Unable to connect to the Geo API');
      } else if (data.message === 'Not Found' || data.features.length === 0) {
        reject('Location not found');
      } else {
        resolve({
          longitude: data.features[0].center[0],
          latitude: data.features[0].center[1],
          location: data.features[0].place_name,
        });
      }
    });
  });
};

// 调用的时候可以用async/await
async function getLocation() {
  try {
    const locationData = await geocode('Beijing');
    console.log(locationData);
  } catch (err) {
    console.error(err);
  }
}

但不管用哪种方案，核心逻辑都是等待异步操作完成后再处理结果，回调只是早期实现这个逻辑的一种方式而已。

内容的提问来源于stack exchange，提问作者CNNTT