javascript - axios get 和promise 函数

Question

我正在训练有希望进行 axios 调用，但没有成功

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

<小时/>

export default class Posizionecliente extends Component {
  constructor(props) {
    super(props);

    this.contiService = new ContiService();
    this.state = {
      conti: [],
    };
  }

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

如何才能用 Promise 完成这个任务？

暂时无法调用，我应该在哪里放置解析？

Answer 1

这里的关键是要认识到 axios 本身返回一个 Promise。因此有几种方法可以解决这个问题。

无论哪种情况，都不需要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' : ''}
               }
    )
}

您不必更改组件逻辑(也许除了处理 promise 拒绝)。

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

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

这里有一篇关于 Promise Chaining 的好读物。特别参见 returning promises. 部分