如何在單獨的 class 中使用 axios

Question

我是反應新手，我想做的是在我的組件“家”外使用 axios 的代理模式，但是當我將 axios 放在我分離的 ZA2F2ED4F8EBC2CBB4C21A29DC40AB6 中時它不起作用但它在我的組件內工作這是我的代理 class：

import axios from "axios";

export default class daniProxy {

  constructor(proxyUrl, apiUrl) {
    this.proxyUrl = proxyUrl;
    this.apiUrl = apiUrl;
  }

  getDanis(restUrt) {
    let ds = {};
    axios
      .get(this.proxyUrl + this.apiUrl + restUrt)
      .then((danis) => {
        ds = {
          data: danis.data,
        };
      })
      .catch((err) => {
        console.log(err);
      });
    return ds;
  }
}

這是我的家庭組件 class：

class home extends Component {
  state = {
    danis: null,
  };

  componentDidMount() {
    let prox = new daniProxy(proxyurl,apiurl);
    console.log(prox.getDanis('/getDanis'))
  }

知道為什么它不返回任何東西嗎？

Answer 1

您的return ds聲明不會等待 axios promise 得到解決。 一旦您調用 axios，就會立即評估下一行，並且ds仍然是一個空的 object。 相反，嘗試返回 promise：

  getDanis(restUrt) {
    return axios
      .get(this.proxyUrl + this.apiUrl + restUrt)
      .then((danis) => {
        return {
          data: danis.data,
        };
      })
      .catch((err) => {
        console.log(err);
      });
  }

現在在您的 componentDidMount 中，您可以聲明為 async 並執行以下操作：

  async componentDidMount() {
    let prox = new daniProxy(proxyurl,apiurl);
    const result = await prox.getDanis('/getDanis');
    console.log(result);
  }

或鏈接您的 promise：

  componentDidMount() {
    let prox = new daniProxy(proxyurl,apiurl);
    prox.getDanis('/getDanis')
        .then(console.log);        
  }

Answer 2

這是因為 GET 請求是異步的，所以返回之前執行。 你應該抓住 promise。

  getDanis(restUrt) {
    return axios
      .get(this.proxyUrl + this.apiUrl + restUrt)
      .then((danis) => {
        return {
          data: danis.data,
        };
      })
      .catch((err) => {
        console.log(err);
      });
  }

然后，在您的組件中，您可以獲得結果

componentDidMount() {
    let prox = new daniProxy(proxyurl,apiurl);
    prox.getDanis('/getDanis').then((res) => {
       console.log(res);     
  });
  }