Question

我正在训练以有希望的方式进行axios呼叫，但是没有成功

<table>
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td><span>2<sup>hello</sup></span></td>
  </tr>
</table>

import axios from "axios";

export class ContiService {
  getConti() {
    return new Promise(function(resolve, reject) {
      setTimeout(function() {
        const URL =
          process.env.REACT_APP_BASE_PATH + process.env.REACT_APP_RESOURCE_CONTI;
        console.log(URL);

        return axios(URL, {
          method: "GET",
          headers: { "content-type": "application/json", preferences: "" },
        });

        resolve(/* ??? */);
      }, 300);
    });
  }
}

如何用诺言完成这一任务？

该呼叫目前无法正常工作，我应该在哪里放置解决方案？

Answer 1

如果一个承诺被另一个承诺解决，它将采用新的承诺。因此：

const request = axios(URL, etc);
resolve(request);

不要return。 setTimeout对其执行的函数的返回值不做任何事情。

Answer 2

这里的关键是要意识到axios本身会返回一个承诺。因此，有两种方法可以解决此问题。

在任何一种情况下，都不需要setTimeout。

return new Promise(function(resolve, reject) {
    const URL = process.env.REACT_APP_BASE_PATH+process.env.REACT_APP_RESOURCE_CONTI;
    axios(URL, {
                   method: 'GET',
                   headers: {'content-type': 'application/json', 'preferences' : ''}
               }
    )
    .then(response=> resolve(response.data))
    .catch(err => reject(err))
}

或者，也许更清楚地，简单地返回axios本身，这将返回promise并允许您的组件逻辑相应地处理状态

getConti() {
    const URL = process.env.REACT_APP_BASE_PATH+process.env.REACT_APP_RESOURCE_CONTI;
    return axios(URL, {
                   method: 'GET',
                   headers: {'content-type': 'application/json', 'preferences' : ''}
               }
    )
}

您不必更改组件逻辑（也许可以处理承诺拒绝）。

this.contiService.getConti().then(r => this.setState({ conti: r.data.conti }));

.then将处理axios调用的成功完成。

在Promise Chaining上的阅读很好。尤其请参见returning promises.

上的部分

axios获得和承诺功能

2 个答案: