JavaScript Geocoding函数返回值无法存入变量问题排查

核心错误有两个，都是JavaScript异步编程的常见问题：

• 你的Geocoding函数没有顶层返回值：axios.get是异步Promise请求，你在.then回调里写的return [lat, lng]只会作为Promise链的回调返回值，不会成为Geocoding函数的返回值，当前写法下Geocoding执行完默认返回undefined
• 调用逻辑没有等待异步请求完成：就算你给Geocoding加上返回值，同步执行var coordinates = Geocoding()拿到的也只是处于pending状态的Promise对象，不是实际的经纬度数组，你在接口还没返回结果的时候就去读coordinates[0]，必然会拿到undefined。

1. 改造Geocoding函数，返回Promise实例 #

在axios.get前加return，把整个请求Promise暴露给外层调用方：

function Geocoding() {
  return axios.get('https://maps.googleapis.com/maps/api/geocode/json', {
    params: {
      address: enteredAddress,
      key: 'my API key here'
    }
  })
    .then(function (response) {
      var lat = response.data.results[0].geometry.location.lat;
      var lng = response.data.results[0].geometry.location.lng;
      return [lat, lng];
    })
    .catch(function (error) {
      console.log(error);
      throw error; // 抛出错误方便外层捕获处理
    });
}

2. 改造提交处理函数，等待请求完成后再执行后续逻辑 #

用async/await写法改造submitHandler，等待接口返回经纬度后再组装参数、执行后续操作：

const submitHandler = async (event) => {
  event.preventDefault();

  // 等待Geocoding请求完成拿到结果
  const coordinates = await Geocoding();
  // 加兜底判断，避免接口异常时后续逻辑报错
  if (!coordinates) return;

  const userInput = {
    location: {
      latitude: coordinates[0],
      longitude: coordinates[1],
      maxDistance: enteredDistance
    },
    instrumentType: enteredInstrumentType,
    awardNumber: enteredAwardNumber,
    includeRetired: enteredIRI
  };
  props.onSaveUserInput(userInput);

  setEnteredAddress('');
  setEnteredDistance('');
  setEnteredInstrumentType('');
  setEnteredAwardNumber('');
  setEnteredIRI('');
};

如果不想用async/await语法，也可以把所有依赖coordinates的逻辑都放到Geocoding().then(coordinates => { 所有后续逻辑写在这里 })的回调里，但async/await的写法逻辑更线性，更适配表单提交这类流程化场景。
另外建议在.then回调里先判断response.data.results是否有值，做一层兜底，避免地址解析无结果时读取数组下标报错。

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