等待/异步

Question

我试图在React中按顺序获取多个请求。共有3个请求

第一个从后端收集编码信息
从身份验证服务器获取令牌
将api与令牌一起使用。

所有这些都必须井井有条。但是由于异步获取功能，我遇到了困难。我无法在.then（）块之外获得访存的响应。

为了解决这个问题，我使用了await / async。但这引起了另一个问题。我的3个请求必须按顺序排列。当我使用异步时，订单会中断。

这是代码。

class App extends Component {
  constructor() {
    super();
    this.state = { code: '', encoded: '', access_token: '', refresh_token: '' };
  }

  getCarDetails() {

    const carId = '2F3A228F6F66AEA580'
    var query = 'https://api.mercedes-benz.com/experimental/connectedvehicle/v1/vehicles/'.concat(carId).concat('/doors')

    fetch(query, {
      method: 'GET',
      headers: {
        'Authorization': 'Bearer '.concat(this.state.access_token),
        'accept': 'application/json'
      }
    })
      .then(res => res.json())
      .then(data => console.log(data))
      .catch(err => console.log(err));
  }

  getToken() {

    var post_data = {
      grant_type: 'authorization_code',
      code: this.state.code,
      redirect_uri: 'http://localhost'
    }

    fetch('https://api.secure.mercedes-benz.com/oidc10/auth/oauth/v2/token', {
      method: 'POST',
      headers: new Headers({
        'Authorization': 'Basic '.concat(this.state.encoded),
        'Content-Type': 'application/x-www-form-urlencoded'
      }),
      body: queryString.stringify(post_data)
    })
      .then(res => res.json())
      .then(data => this.setState({ access_token: data.access_token, refresh_token: data.refresh_token }))
      .catch(err => console.log(err));
  }

  getEncodedClientIdAndClientSecret() {
    if (this.state.code != null) {

      fetch('http://localhost:8000/encodeClientIdAndSecret', {
        method: 'POST'
      })
        .then(res => res.json())
        .then(data => this.setState({ encoded: data.encoded }))
        .catch(err => console.log(err));
    }
  }

  componentDidMount() {
    const values = queryString.parse(this.props.location.search)
    this.setState({ code: values.code })

    console.log(this.state)
    this.getEncodedClientIdAndClientSecret();
    console.log(this.state) //this state is empty
    //this.getToken();
    //this.getCarDetails();

  }

等待/异步

  async getEncodedClientIdAndClientSecret() {
    if (this.state.code != null) {

      const response = await fetch('http://localhost:8000/encodeClientIdAndSecret', {
        method: 'POST'
      })


      const data = await response.json();
      console.log(data)
    }
  }

如果我等待/异步，则我在3个请求之间遇到顺序问题。

Answer 1

为了在类似的方法上使用异步等待

await getEncodedClientIdAndClientSecret();
await getToken();

您需要首先从以下功能中返回承诺：

getToken() {
    var post_data = {
      grant_type: 'authorization_code',
      code: this.state.code,
      redirect_uri: 'http://localhost'
    }

    return fetch('https://api.secure.mercedes-benz.com/oidc10/auth/oauth/v2/token', {
      method: 'POST',
      headers: new Headers({
        'Authorization': 'Basic '.concat(this.state.encoded),
        'Content-Type': 'application/x-www-form-urlencoded'
      }),
      body: queryString.stringify(post_data)
    })
      .then(res => res.json())
      .then(data => this.setState({ access_token: data.access_token, refresh_token: data.refresh_token }))
      .catch(err => console.log(err));
  }

因此它可以等待诺言完成，否则它们将并行运行并以随机顺序完成。

JavaScript依次提取多个请求

等待/异步

1 个答案: