javascript - 如何获取并保存异步函数的值

我是javascript新手。我有一个异步函数getListBar。在getListBar内部，我使用getAccount的返回结果，就像函数fetch的输入一样（您可以看到user.access_token）。代码运行正确，但是我不想每次使用getListBar时都调用getAccount。那么我如何获取getAccount的结果并保存呢？

我已经尝试了很多方法，但是对我来说非常困难，我不知道如何保存结果

async function getAccount() {
    try {
        let response = await fetch(apiAuthen,
            {
                method: 'POST',
                headers: {
                    Accept: '*/*',
                    'Authorization': 'Basic a2VwbGxheTpva2Vwba2VwbGxaQ1YWwjJA==',
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'grant_type': 'password',
                },
                body: qs.stringify({
                    'grant_type': 'password',
                    'username': 'abc',
                    'password': 'abc',
                    'client_id': 'abc',
                })
            })
        let responseJson = await response.json();
        return responseJson.data;
    } catch (error) {
        console.log(`Error is : ${error}`);
    }
}
async function getListBar() {
    try {
        const user = await getAccount().then(user => { return user });
        let response = await fetch(apiBar,
            {
                headers: {
                    'Authorization': 'Bearer ' + user.access_token
                }
            })
        let responseJson = await response.json();
        return responseJson.data;
    } catch (error) {
        console.log(`Error is : ${error}`);
    }
}

getAccount将返回这样的Promise，我想在其中保存access_token

Promise {_40: 0, _65: 0, _55: null, _72: null}
_40: 0
_55: {access_token: "41b369f2-c0d4-4190-8f3c-171dfb124844", token_type: "bearer", refresh_token: "55867bba-d728-40fd-bdb9-e8dcd971cb99", expires_in: 7673, scope: "read write"}
_65: 1
_72: null
__proto__: Object

最佳答案

如果不可能简单地在定义这些函数的相同范围内存储值，则我将创建一个Service来处理获取用户的问题。最好在自己的文件中

AccountService.js

class AccountService {
  getAccount = async () => {
    if (this.user) {
      // if user has been stored in the past lets just return it right away
      return this.user;
    }
    try {
      const response = await fetch(apiAuthen, {
        method: 'POST',
        headers: {
          Accept: '*/*',
          Authorization: 'Basic a2VwbGxheTpva2Vwba2VwbGxaQ1YWwjJA==',
          'Content-Type': 'application/x-www-form-urlencoded',
          grant_type: 'password'
        },
        body: qs.stringify({
          grant_type: 'password',
          username: 'abc',
          password: 'abc',
          client_id: 'abc'
        })
      });

      const responseJson = await response.json();
      this.user = responseJson.data; // store the user
      return this.user;
    } catch (error) {
      console.log(`Error is : ${error}`);
    }
    // you should decide how to handle failures
    // return undefined;
    // throw Error('error getting user :(')
  };
}

// create a single instance of the class
export default new AccountService();

并在需要的地方导入

import AccountService from './AccountService.js'

async function getListBar() {
    try {
        // use AccountService instead
        const user = await AccountService.getAccount().then(user => { return user });
        let response = await fetch(apiBar,
            {
                headers: {
                    'Authorization': 'Bearer ' + user.access_token
                }
            })
        let responseJson = await response.json();
        return responseJson.data;
    } catch (error) {
        console.log(`Error is : ${error}`);
    }
}

您仍然每次都会在getListBar中调用getAccount，但是只有在AccountService没有存储用户时，它才会获取。