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

Question

我是 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_tokenPromise {_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

Answer 1

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

账户服务.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 没有存储用户时获取

Answer 2

现在我以不同的方式写作

export default class App extends Component {

  constructor() {

    super();

    this.state = {

      accessToken: '',

      users: [],

      listBar: []

    }

  }

  //Get Account

  Check = () => {

    getAccount().then((users) => {

      this.setState({

        users: users,

        accessToken: users.access_token

      });

    }).catch((error) => {

      this.setState({ albumsFromServer: [] });

    });

  }

  //Get Account

  getAccount() {

    return 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',

        })

      }).then((response) => response.json())

      .then((responseJson) => {

        this.setState({

          users: responseJson.data,

          accessToken: responseJson.data.access_token

        });

        return responseJson.data

      })

      .catch((error) => {

        console.error(error);

      });

  }

  //Get List Bar

  getListBarFromServer() {

    return fetch(apiBar, {

      headers: {

        'Authorization': 'Bearer ' + this.state.accessToken

      }

    }).then((response) => response.json())

      .then((responseJson) => {

        console.log(this.getListBarFromServer()) <---- Just run if console

        this.setState({ listBar: responseJson.data });

        return responseJson.data

      })

      .catch((error) => {

        console.error(error);

      });

  }

  componentDidMount() {

    this.getAccount();

    this.getListBarFromServer();

  }

  render() {

    return (

      <View style={{ top: 100 }}>

        <FlatList data={this.state.listBar} renderItem={({ item }) => {

          return (

            <View>

              <Text>{item.bar_id}</Text>

            </View>

          )

        }}>

        </FlatList>

      </View>

    )

  }

}

它只是在我 console.log(this.getListBarFromServer()) 时运行。请向我解释为什么？