在外部文件的 useEffect 中使用 Axios

Question

我正在尝试将 axios 调用从外部文件导出到我的组件，在 useEffect 中。我正在导出功能并在所述组件中导入。响应是“未定义”。

api_call.js:

import axios from 'axios';

const accessToken = window.localStorage.getItem('accessToken')

export const getPublicCircles = async () => {
    const headers = {
      'Content-Type': 'application/json',
      'Accept-Language': 'fr',
      'Authorization': `Bearer ${accessToken}`,
    }
    await axios.get('https://myurl.com/api/this-info', { headers })
      .then(response => console.log(response)) 
      .catch(error => console.log('error', error))
  };

( 我也试过 .then((response) => return response.data.data)

component.js

import * as  API from '../../api/api_call';

export default function PublicCircles() {

  const [circles, getCircles] = useState('');

  useEffect(() => {
    const fetchData = async () => {
      const response = await API.getPublicCircles();
      const json = await response.json();
      console.log(response)
      getCircles(response);
    }

    fetchData()
      .catch(console.error);;
  }, []);

  return (
    <Box>
      {circles === '' ? null :
      <PublicCircle circles={circles} />}
    </Box>
  )
}

这是结果（从 api_call.js 文件获取信息，而不是 PublicCirlces.js 文件。谢谢。

Answer 1

这里真正的问题是函数 getPublicCircles return 什么都没有，这就是为什么这个函数调用的结果被赋值的任何变量都将是 undefined 根据 JavaScript 规则，因为没有 return 任何值的函数将 return undefined.

同时使用 async/await 和 then/catch 来处理承诺不是一个好主意。下面是使用 try/catch 和 async/await 正确处理它的示例：

export const getPublicCircles = async () => {
    const headers = {
      'Content-Type': 'application/json',
      'Accept-Language': 'fr',
      'Authorization': `Bearer ${accessToken}`,
    }
    
    try {
        const data = await axios.get('https://myurl.com/api/this-info', { headers });

        return data;
    } catch(error) {
        console.error('error',error);
    }
}

在外部文件的 useEffect 中使用 Axios

Using Axios in useEffect from an external file

reactjs

axios

use-effect