Question

我的问题是在一个简单的JS文件中编写async / await的想法。

如示例所示，我想在我的应用程序中实现react-native-languages，因此我必须创建一个i18n文件，在其中设置配置，该文件可以正常工作。一个问题是我想为用户提供更改语言的能力，并且当他们想要将所选语言存储在我的localStorage中时，因此通常我必须在i18n文件中检查localStorage是否存在某种语言或不是，但是我们都知道localStorage是异步的，那我该怎么办？

这是我的i18n文件

import React from 'react';
import { AsyncStorage } from 'react-native';
import RNLanguages from 'react-native-languages';
import i18n from 'i18n-js';

import en from '@languages/en.json';
import ar from '@languages/ar.json';

let default_language = async () => {
  return await AsyncStorage.getItem('language');
}

// the above approach is not working

i18n.locale = RNLanguages.language;
i18n.fallbacks = true;
i18n.translations = { ar, en }

export default i18n;

如何使代码在执行其他任何操作之前等待本地存储中的提取？

Answer 1

异步函数是异步的。

您不能使异步功能同步运行。

您可以使用标记为await的函数内的async关键字来创建运行异步函数的错觉。

您只能await是Promise的值。（我不知道AsyncStorage.getItem('language')是否返回Promise）。

要执行此操作，async函数将始终返回一个承诺。

所以：

let default_language = async () => {
  return await AsyncStorage.getItem('language');
}

创建一个分配给default_language的函数。

该函数将返回一个承诺。该承诺将解决您所返回的价值。由于这需要是一个承诺，因此该价值将是一个承诺。如果您用另一个承诺解决了一个承诺，它将采用新的承诺。

这意味着您的代码与以下功能相同：

let default_language = () => AsyncStorage.getItem('language');

将多余的功能包装起来几乎没有意义。它只是使名称稍短一些，以便以后调用。

只有在要使用async函数的值内进行操作时，才使用await / async：

let default_language = async () => {
  const lang = await AsyncStorage.getItem('language');
  console.log(lang);
  something_useful(lang);
  return lang;
}

Answer 2

解决后，您想使用defaultLanguage。 await表达式会导致异步函数执行暂停，直到承诺被解决为止。当您调用setLanguage函数时，它将等待直到defaultLanguage被解决或拒绝。您可以首先查看如何使用回调函数，而不是使用async。我相信了解async的工作方式会更有用。

let setLanguage = async () => {
   // you may add get keyword to function name
   let defaultLanguage = await default_language();
   // check defaultLanguage and set if necessary
}

在简单的JS文件中异步/等待

2 个答案: