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

Question

I'm new in javascript. I've a async function getListBar. Inside getListBar i use return result of getAccount like a input of function fetch( you can see user.access_token) . Code run correct but i don't want call getAccount everytime i use getListBar. So how can i get result of getAccount and save it ?

I've tried many ways but promise very difficult to me , i don't know how to save result of it

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 will return a Promise like this and i want save access_token in it

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

Answer 1

If it is not possible to simply store a value in the same scope that these functions are defined, I would create a Service to handle getting the user. Preferably in its own file

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();

and import it where needed

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}`);
    }
}

You will still be calling getAccount each time in getListBar but it will only fetch when AccountService has no user stored.

Answer 2

Now i write in the different way

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>
    )
  }
}

It's just run when i console.log(this.getListBarFromServer()) .Please explain to me why?