反应中异步函数中意外的保留字'await'

Question

我真的是React中的新手，我想获得位置坐标并将它们传递给带有参数的API，但我收到:

Unexpected reserved word 'await'

代码:

async getData() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(function (position) {
console.log("Latitude is :", position.coords.latitude);
console.log("Longitude is :", position.coords.longitude);
var lat = position.coords.latitude;
var lon = position.coords.longitude;
const url = `http://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=ca148f5dc67f12aafaa56d1878bb6db2`;
const response = await fetch(url);
let data = await response.json();

console.log(data);
});
}

}

Answer 1

您的await不在async函数中(它在async函数中嵌套的非async函数中)，但更大的问题是您的getData正试图返回一个不适合承诺模型的承诺:重复来自地理位置对象的一系列更新。watchPosition反复调用它的回调函数，而不仅仅是一次。

JavaScript没有这种东西的内置语义，它通常被称为"observable"(好吧，有async迭代器，但我怀疑你可能不想要它)。有相应的库，但除此之外，你必须让getData接受一个回调，每当有更新时就会被调用。类似以下语句:

getData(callback) {
if (!navigator.geolocation) {
throw new Error("No geolocation available");
}
navigator.geolocation.watchPosition(position => {
console.log("Latitude is :", position.coords.latitude);
console.log("Longitude is :", position.coords.longitude);
var lat = position.coords.latitude;
var lon = position.coords.longitude;
const url = `http://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=ca148f5dc67f12aafaa56d1878bb6db2`;
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error ${response.status}`);
}
return response.json();
})
.then(result => {
try {
callback(result);
} catch { }
})
.catch(error => {
// ...perhaps handle the error or similar...
});
});
}

从名称getData来看，您可能只是想一次性获得当前位置。这就是getCurrentPosition方法。如果是这样，你需要手动创建一个承诺，因为getCurrentPosition没有提供:

getData() {
return new Promise((resolve, reject) => {
if (!navigator.geolocation) {
reject(new Error("No geolocation available"));
return;
}
navigator.geolocation.getCurrentPosition(position => {
console.log("Latitude is :", position.coords.latitude);
console.log("Longitude is :", position.coords.longitude);
var lat = position.coords.latitude;
var lon = position.coords.longitude;
const url = `http://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=ca148f5dc67f12aafaa56d1878bb6db2`;
resolve(
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error ${response.status}`);
}
return response.json();
})
);
});
});
}

但这只是当你只想要当前位置时。

Answer 2

函数需要设置为async。你确实把父函数设置为异步但是你也传入了一个回调你没有把它设置为异步

async getData() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(async function (position) {
console.log("Latitude is :", position.coords.latitude);
console.log("Longitude is :", position.coords.longitude);
var lat = position.coords.latitude;
var lon = position.coords.longitude;
const url = `http://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=ca148f5dc67f12aafaa56d1878bb6db2`;
const response = await fetch(url);
let data = await response.json();

console.log(data);
});