javascript - 异步函数未返回完成的 promise

Question

我有一个 javascript 文件，可以在其中获取用户的地理位置。我将它包装在一个 promise 中，以确保它返回坐标。

geoLocation.js:

const getGeoLocation = () => {
  return new Promise(function(resolve, reject){
    function positionSuccess(position){             
      resolve(position);
    }
    function positionError(error){
      reject('ERROR: ' + error.code + ': ' + error.message);
    };
    navigator.geolocation.getCurrentPosition(positionSuccess, positionError);
  });
};

async function userCoords() {
  const response = await getGeoLocation();
}

module.exports = userCoords;

从这里我将异步 userCoords 函数导入到 Main.js react 组件中。在它的渲染方法中，我要求它console.log(userCoords())，但我在控制台中得到的是:

看起来它仍在等待完成我的 getGeoLocation promise 。我应该做什么来确保 getGeoLocation 完全完成并且我可以将其返回坐标传递给我的 Main.js 组件？

谢谢!

Answer 1

异步函数将始终返回一个 promise ，即使它已经解决了。您必须使用 promise.then 或 await。如果您可以使渲染函数异步，那么您可以编写:

console.log(await userCoords());

异步函数是有毒的，这意味着任何调用异步函数(并期望确定值)的函数本身都必须是异步的。在编写用户界面时，这是特别痛苦的，因为 UI 代码本质上是同步的。显示来自异步数据源的数据很难做好，需要仔细的设计。

也许您能做的最简单的事情就是独立于渲染周期轮询用户坐标:

var coords_promise = null;
var coords = null;

function render() {
    if (!coords_promise) {
        coords_promise = userCoords().then(function(newCoords) {
            coords = newCoords;
            coords_promise = null;
        });
    }
    console.log(coords);
}

setInterval(render, 20);

这段代码将在调用渲染函数时开始获取坐标。这意味着渲染函数的前几个周期将打印 coords 变量的初始值，但之后它将使用 userCoords() 的最新确定的返回值。此代码还确保，如果未调用 render() 函数，则不会进行任何提取，并且不会对 userCoords() 进行并行调用。