![](/img/trans.png)
[英]How to easily make asyn/await works with the traditional callback function in js
[英]How can I make this function synchronous with Asyn/await
我試圖使這段代碼是同步的,但是由於某種原因async / await無法正常工作。我在React-native中使用兩個不同的模塊工作。 我想在googleMaps中查看我的地理位置,但是因為異步的東西,它給我一個錯誤。
應用程序是根組件,它導入了getLocalitation函數。
export default class App extends Component {
Appmetod = async () => {
const resp = await getLocalitation();
console.log('Appmetod: latitud: ' + resp.latitude);
Linking.openURL(`http://www.google.com/maps/place/-33.317597,-71.405500`);
}
render() {
return (
<View style={styles.container}>
<Button title="Click me" onPress={this.Appmetod } />
</View>
);
}
}
const getLocalitation = () =>{
console.log('DENTRO DE GetLocalitaion');
const geoOptions={
enableHighAccuracy: true,
timeOut: 10000
};
const coordenates = navigator.geolocation.getCurrentPosition( geoSucces,goFailure, geoOptions);
console.log('DESPUES DE COORDENATES');
return coordenates;
}
const geoSucces = (position) => {
console.log('DENTRO DE GEOSUCCEES');
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
const coordenates={
latitude: latitude,
longitude: longitude
};
console.log('COORDENATES: ' + coordenates.latitude);
return coordenates;
}
const goFailure = (err) => {
console.log('Error en al geolocalizar: ' + err);
return null;
}
輸出:
C:\Users\jnunez\React-Native\Proyects\geolocation\node_modules\react-native\Libraries\Utilities\infoLog.js:16 Running application "geolocation" with appParams: {"rootTag":161}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
C:\Users\jnunez\React-Native\Proyects\geolocation\src\getLocalitation.js:2 DENTRO DE GetLocalitaion
C:\Users\jnunez\React-Native\Proyects\geolocation\src\getLocalitation.js:10 DESPUES DE COORDENATES
C:\Users\jnunez\React-Native\Proyects\geolocation\src\getLocalitation.js:16 DENTRO DE GEOSUCCEES
C:\Users\jnunez\React-Native\Proyects\geolocation\src\getLocalitation.js:26 COORDENATES: -32.92098393
C:\Users\jnunez\React-Native\Proyects\geolocation\node_modules\react-native\Libraries\YellowBox\YellowBox.js:67 Possible Unhandled Promise Rejection (id: 0):
TypeError: Cannot read property 'latitude' of undefined
TypeError: Cannot read property 'latitude' of undefined
at _callee$ (blob:http://localhost:8081/19d9ce97-42d2-4939-91b8-160b264c9c79:1895:58)
at tryCatch (blob:http://localhost:8081/19d9ce97-42d2-4939-91b8-160b264c9c79:41538:19)
at Generator.invoke [as _invoke] (blob:http://localhost:8081/19d9ce97-42d2-4939-91b8-160b264c9c79:41713:24)
at Generator.prototype.<computed> [as next] (blob:http://localhost:8081/19d9ce97-42d2-4939-91b8-160b264c9c79:41581:23)
at tryCatch (blob:http://localhost:8081/19d9ce97-42d2-4939-91b8-160b264c9c79:41538:19)
at invoke (blob:http://localhost:8081/19d9ce97-42d2-4939-91b8-160b264c9c79:41614:22)
at blob:http://localhost:8081/19d9ce97-42d2-4939-91b8-160b264c9c79:41624:15
at tryCallOne (blob:http://localhost:8081/19d9ce97-42d2-4939-91b8-160b264c9c79:45254:14)
at blob:http://localhost:8081/19d9ce97-42d2-4939-91b8-160b264c9c79:45355:17
at blob:http://localhost:8081/19d9ce97-42d2-4939-91b8-160b264c9c79:46233:21
console.warn @ C:\Users\jnunez\React-Native\Proyects\geolocation\node_modules\react-native\Libraries\YellowBox\YellowBox.js:67
onUnhandled @ C:\Users\jnunez\React-Native\Proyects\geolocation\node_modules\react-native\Libraries\Promise.js:45
onUnhandled @ C:\Users\jnunez\React-Native\Proyects\geolocation\node_modules\promise\setimmediate\rejection-tracking.js:71
(anonymous) @ C:\Users\jnunez\React-Native\Proyects\geolocation\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:256
_callTimer @ C:\Users\jnunez\React-Native\Proyects\geolocation\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:152
callTimers @ C:\Users\jnunez\React-Native\Proyects\geolocation\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:414
__callFunction @ C:\Users\jnunez\React-Native\Proyects\geolocation\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:366
(anonymous) @ C:\Users\jnunez\React-Native\Proyects\geolocation\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:106
__guard @ C:\Users\jnunez\React-Native\Proyects\geolocation\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:314
callFunctionReturnFlushedQueue @ C:\Users\jnunez\React-Native\Proyects\geolocation\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:105
(anonymous) @ debuggerWorker.js:80
await
/ async
不要停止異步代碼。
它們是使您可以通過管理Promise編寫非異步樣式代碼的工具。
您只能await
諾言。 getLocalitation
不返回承諾。
請參閱如何將現有的回調API轉換為Promise? 獲得對navigator.geolocation.getCurrentPosition
的承諾。
這是因為您將await關鍵字與非異步功能一起使用
const resp = await getLocalitation();
您可以在定義getLocation時將異步放在()
之前,也可以只從const resp = await getLocalitation()
刪除await ,因為您不需要將await與不返回promise的東西一起使用。
如果您想使getLocalitation
異步,您可以這樣做
const getLocalitation = async () =>{
console.log('DENTRO DE GetLocalitaion');
const geoOptions={
enableHighAccuracy: true,
timeOut: 10000
};
const coordenates = navigator.geolocation.getCurrentPosition( geoSucces,goFailure, geoOptions);
console.log('DESPUES DE COORDENATES');
return coordenates;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.