React Axios 返回未定义答案

【问题标题】：React Axios return undefinedReact Axios 返回未定义
【发布时间】：2020-08-17 20:39:26
【问题描述】：

fetchApi.tsx
这是我使用 axios 获取 api 的地方

import BASE_API_URL from "../"
import axios from "axios"

const fetchClient = () => {
  const defaultOptions = {
    baseURL: BASE_API_URL,
    headers: {
      "Content-Type": "application/json",
    },
};

let instance = axios.create(defaultOptions);

instance.interceptors.response.use(
 function (response) {
   return response;
 },
 function (error) {
    return Promise.reject(error);
 }
);
return instance;
};

数据.tsx
这个文件是我把它放在一起在主文件中调用的地方

import React from "react";
import ApiUrl from "../Common/api/ApiUrl"
import fetchClient from "../Common/api/fetchApi";

const data = () => {

    fetchClient(ApiUrl.USER_CURRENT)
    .then(response => {
        console.log(response.data) --> this return what I wanted
        return response
    }) 
}
export default data;

主文件

 useEffect(() => {
    const result = data();
    console.log("--- ",result)      --> result is undefined
  }, []);

当我在主文件中调用 useEffect 时，data() 返回 undefined 但它显示了我想要在 data.tsx 中的数据，有什么想法吗？

在主文件中，我想将数据设置为 useState([])
我能够通过使用正常的 fetch 来让它工作

fetch("some url")
.then(res => res.json)
.then(result => {
    setSomeData(result.data)
}

我想做一些 url 配置，使主文件中的代码更简洁。

【问题讨论】：

标签： reactjs typescript axios

【解决方案1】：

在您的代码中，data 实际上并没有返回任何内容。您在 .then() 中返回，但返回的是内部函数，而不是外部函数。 data() 要么需要是异步函数，要么返回 Promise。如果您转换为 async 函数，请记住 useEffect 不能是异步的。

一般这种代码的模式是：

async function data() {
  // do something;
  return something;
}

useEffect(function() {
  const getData = async function() {
    const something = await data();
    // set state with something
  }

  getData();
});

【讨论】：

我不明白异步函数 data() 我在这里返回什么？

【解决方案2】：

您必须使用promises 才能使用不易获得且将在未来某个时间可用的数据。我推荐简洁的Async/Await 语法。

const data = async () => {

    const response = await fetchClient(ApiUrl.USER_CURRENT)
    console.log(response.data) --> this return what I wanted
    return response
}

useEffect(() => {
    const getData = async () => {
        const result = await data();
        console.log("--- ",result)      --> result is undefined
    };
    getData();
  }, []);

【讨论】：

@TuanLe 在你的data 函数中的console.log 记录你想要什么？
数据文件中的 console.log 确实返回了我在代码中注释的内容。
@TuanLe 那就很奇怪了，试试在const result = await data();前面加一个console.log，看看你有没有输入getData。
我只需要在 const 数据中等待和异步，调用 data() 时不需要第二次等待。谢谢@Mahdi

【解决方案3】：

我认为defaultOptions 需要在fetchClient 之外才能通过axios.create() 方法访问。

另一种选择是将 fetchClient 中的所有内容保留在同一上下文中。

import BASE_API_URL from "../"
import axios from "axios"

const fetchClient = () => {
  const defaultOptions = {
    baseURL: BASE_API_URL,
    headers: {
      "Content-Type": "application/json",
    },
  };

  let instance = axios.create(defaultOptions);

  instance.interceptors.response.use(
    function (response) {
      return response;
    },
    function (error) {
        return Promise.reject(error);
    }
  );

  return instance;
};

export default fetchClient;

你也忘记了导出你的模块。

【讨论】：

我认为这不是问题，因为 axios.create 能够访问 BASE_API_URL，这就是它在数据文件中工作的原因。