将变量设置为 Axios 调用答案

【问题标题】：Setting Variable to Axios Call将变量设置为 Axios 调用
【发布时间】：2018-07-27 21:04:13
【问题描述】：

在 React 中，我试图在返回数据后将变量设置为 axios 调用。但是，当控制台随后记录变量时，这是一个承诺。如何从 promise 中获取值并将其设置为变量？

    let fourPackProducts = axios.get('URL').then(response => {
    return response.data })
console.log(fourPackProducts)

Console log screenshot

【问题讨论】：

你应该使用 es6 async/await var tests = async () => { let response = await axios.get('URL'); console.log(response.data) } test();

标签： reactjs api promise return axios

【解决方案1】：

您正在控制台记录一个承诺，因为fourPackProducts 是一个承诺。问题的另一部分是，由于 Promise 是异步的，因此在 Promise 响应通过之前调用控制台日志。要正确设置对变量的承诺响应，请尝试以下操作：

let promiseResponse;
let fourPackProducts = axios.get('URL').then(response => {
   promiseResponse = response.data;
   console.log(promiseResponse);
   return promiseResponse; 
})

大概你想在之后对这个变量做点什么，但如果承诺还没有完成，那么变量将是undefined。为了在将变量设置为承诺响应后使用该变量，您需要chain promises。

【讨论】：

【解决方案2】：

你完全按照你的要求做了。如果你想console.log 正确的数据，链接另一个然后像这样，

let promiseResponse = axios.get('URL')
  .then(response => response.data)
  .then( data => { console.log( data ); return data });

请记住，ajax 请求是异步的，因此不使用异步处理程序的 ajax 请求之后的代码将运行，编译器不会停止并等待请求完成

【讨论】：

如果您可以打印并从第一个返回结果，那么第二个有什么用？没必要再添加一步 let promiseResponse = axios.get('URL') .then( response=> { console.log( response.data ); return response.data });
是的，我只是冗长地试图表明，为了访问该变量作为已解决的承诺，它必须在 .then