React Axios 获取数据失败

Question

I have a test application where I want to get data from fake API using Axios and pass to redux, but I get an error while getting data. How can I get the data correctly?

I checked API via postman / get all data I get

SANDBOX

API: Link

Error: Unable to open 'createError.js': File not found (file:///sandbox/node_modules/axios/lib/core/createError.js).

Action.js

export const getDataTablePayload = () => {
  const payload = axios.get(API.bigData).then((response) => response.data);
  console.log(payload);
};

Answer 1

The problem is with your api url

export const API = {
  smallData:
    "http://www.filltext.com/?rows=32&id={number|1000}&firstName={firstName}&lastName={lastName}&email={email}&phone={phone|(xxx)xxx-xx-xx}&address={addressObject}&description={lorem|32}",
  bigData:
    "http://www.filltext.com/?rows=1000&id={number|1000}&firstName={firstName}&delay=3&lastName={lastName}&email={email}&phone={phone|(xxx)xxx-xx-xx}&address={addressObject}&description={lorem|32}"
};

Sand box is blocking the request as it is not https. And your api doesnt have any certificate so your api will not support https

But if you use that locally it will work but not with sandbox.

Answer 2

Axios was blocked by codesandbox for this error and it should work locally, but at first you was handling the response improperly this is why you're not getting the payload , here is an explanation:

export const getDataTablePayload = () => {
  const payload = axios.get(API.bigData).then((response) => response.data); // this is async code
  // the console will run before the data will be fetched so you have two solution ?
  console.log(payload);
};

1.
export const getDataTablePayload = () => {
  axios
    .get(API.bigData)
    .then((response) => response.data)
    .then((data) => {
      // do your work here
    });
};

2.
export const getDataTablePayload = async () => {
  const response = await axios.get(API.bigData)
  // here await will wait until the data will be fetched
  console.log('payload', response.data);
};