Question

我正在尝试使用Node.JS应用程序来发出和接收API请求。它使用Axios向另一台服务器发送get请求，该请求包含从它接收的API调用接收的数据。第二个片段是当脚本从调用中返回数据时。它实际上会接受并写入控制台，但它不会在第二个API中将其发回。

function axiosTest () {
axios.get(url)
.then(function (response) {
        console.log(response.data);
// I need this data here ^^
return response.data;
})
.catch(function (error) {
    console.log(error);
});
}

...

axiosTestResult = axiosTest(); 
response.json({message: "Request received!", data: axiosTestResult});

我知道这是错的，我只是想找到一种方法让它发挥作用。我似乎从中获取数据的唯一方法是通过console.log，这对我的情况没有帮助。

Answer 1

从axiosTest函数中的axios调用返回promise，然后在使用其他.then

调用时从promise中获取值

function axiosTest() {
  return axios.get(url).then(response => {
    // returning the data here allows the caller to get it through another .then(...)
    return response.data
  })
}

axiosTest().then(data => {
  response.json({ message: 'Request received!', data })
})

我还建议您详细了解承诺如何发挥作用：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

Answer 2

我知道这则帖子很旧。但是我已经看到有人尝试使用异步来回答并等待但又弄错了。这应该为所有新引用清除它

async function axiosTest() {
      try {
        const {data:response} = await axios.get(url) //use data destructuring to get data from the promise object
        return response
      }

      catch (error) {
        console.log(error);
      }
    }

Answer 3

在调用axios get之前，我做了一个空数组然后.then（function（response））将必要的数据推送到数组中函数结束时返回了数组

function axiosTest () {
     var strr = [];
        axios.get(url)
       .then(function(response){
               strr.push(response.data);
        })


        .catch(function(error){
               console.log(error);
           });
        return strr;
}

Answer 4

axiosTest()正在解雇asynchronously而没有等待。

之后需要关联then() function才能捕获response variable（axiosTestData）。

有关详细信息，请参阅Promise。

请参阅Async以升级。

// Dummy Url.
const url = 'https://jsonplaceholder.typicode.com/posts/1'

// Axios Test.
const axiosTest = axios.get

// Axios Test Data.
axiosTest(url).then(function(axiosTestResult) {
  console.log('response.JSON:', {
    message: 'Request received',
    data: axiosTestResult.data
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>

Answer 5

对于您的客户端js代码而言，IMO极其重要的经验法则是将数据处理和ui构建逻辑分隔为不同的功能，这对于axios数据提取也同样有效...这样，您的控制流和错误处理从这里可以看出，它将变得更加简单和易于管理。 ok fetch

和这个 NOK fetch

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>

       function getUrlParams (){
          var url_params = new URLSearchParams();
          if( window.location.toString().indexOf("?") != -1) {
             var href_part = window.location.search.split('?')[1]
             href_part.replace(/([^=&]+)=([^&]*)/g,
                function(m, key, value) {
                   var attr = decodeURIComponent(key)
                   var val = decodeURIComponent(value)
                   url_params.append(attr,val);
             });
          }
          // for(var pair of url_params.entries()) { consolas.log(pair[0]+ '->'+ pair[1]); }
          return url_params ;
       }


      function getServerData (url, urlParams ){
          if ( typeof url_params == "undefined" ) { urlParams = getUrlParams()  }
          return axios.get(url , { params: urlParams } )
          .then(response => {
             return response ;
          })
          .catch(function(error) {
             console.error ( error )
             return error.response;
          })
       }

    // Action !!!
    getServerData(url , url_params)
        .then( response => {
           if ( response.status === 204 ) {
              var warningMsg = response.statusText
              console.warn ( warningMsg )
              return
           } else if ( response.status === 404 || response.status === 400) {
              var errorMsg = response.statusText // + ": "  + response.data.msg // this is my api
              console.error( errorMsg )
              return ;
           } else {
              var data = response.data
              var dataType = (typeof data)
              if ( dataType === 'undefined' ) {
                 var msg = 'unexpected error occurred while fetching data !!!'
                 // pass here to the ui change method the msg aka
                 // showMyMsg ( msg , "error")
              } else {
                 var items = data.dat // obs this is my api aka "dat" attribute - that is whatever happens to be your json key to get the data from
                 // call here the ui building method
                 // BuildList ( items )
              }
              return
           }

        })




    </script>

Answer 6

axios库创建一个Promise（）对象。 Promise是JavaScript ES6中的内置对象。使用new关键字实例化此对象时，它将一个函数作为参数。该单个函数又包含两个参数，每个参数也是函数-解析和拒绝。

承诺执行客户端代码，并且由于 cool Javascript异步流的存在，最终可以解决一两个问题，即解决方案（通常被视为在语义上等同于Promise的成功），或者该拒绝（通常被认为是错误的解决方案）。例如，我们可以保留对某个Promise对象的引用，该引用包含一个函数，该函数最终将返回（将包含在Promise对象中）。因此，我们可以使用这种承诺的一种方法是等待该承诺解决为某种响应。

您可能会提出，我们不想等待约几秒钟的时间来让我们的API返回调用！我们希望用户界面能够在期间等待API响应。否则，我们的用户界面将非常缓慢。那么我们如何处理这个问题呢？

好的承诺是异步。在负责执行Javascript代码的引擎（例如Node或通用浏览器）的标准实现中，它将在另一个过程中解析，而我们事先不知道诺言的结果是什么。通常的策略是然后发送我们的函数（即一个类的React setState函数）给promise，并根据某种条件（取决于我们对库的选择）对其进行解析。这将导致我们的本地Javascript对象根据Promise解析进行更新。因此，您可以想到可以发送到异步方法的函数，而不是传统的OOP中的getter和setter方法。

在此示例中，我将使用Fetch，以便您可以尝试了解Promise中发生的事情，并查看是否可以在axios代码中复制我的想法。在没有先天JSON转换的情况下，提取与axios基本相似，并且具有不同的流程来解决Promise（您应参考axios文档进行学习）。

GetCache.js

const base_endpoint = BaseEndpoint + "cache/";
// Default function is going to take a selection, date, and a callback to execute.
// We're going to call the base endpoint and selection string passed to the original function.
// This will make our endpoint.
export default (selection, date, callback) => {  
  fetch(base_endpoint + selection + "/" + date) 
     // If the response is not within a 500 (according to Fetch docs) our promise object
     // will _eventually_ resolve to a response. 
    .then(res => {
      // Lets check the status of the response to make sure it's good.
      if (res.status >= 400 && res.status < 600) {
        throw new Error("Bad response");
      }
      // Let's also check the headers to make sure that the server "reckons" its serving 
      //up json
      if (!res.headers.get("content-type").includes("application/json")) {
        throw new TypeError("Response not JSON");
      }
      return res.json();
    })
    // Fulfilling these conditions lets return the data. But how do we get it out of the promise? 
    .then(data => {
      // Using the function we passed to our original function silly! Since we've error 
      // handled above, we're ready to pass the response data as a callback.
      callback(data);
    })
    // Fetch's promise will throw an error by default if the webserver returns a 500 
    // response (as notified by the response code in the HTTP header). 
    .catch(err => console.error(err));
};

现在，我们已经编写了GetCache方法，让我们以示例的形式来查看更新React组件的状态是什么...

一些React Component.jsx

// Make sure you import GetCache from GetCache.js!

resolveData() {
    const { mySelection, date } = this.state; // We could also use props or pass to the function to acquire our selection and date.
    const setData = data => {
      this.setState({
        data: data,
        loading: false 
        // We could set loading to true and display a wee spinner 
        // while waiting for our response data, 
        // or rely on the local state of data being null.
      });
    };
  GetCache("mySelelection", date, setData);
  }

最终，您不会像这样“返回”数据，我的意思是可以，但是改变思维方式更加惯用了……现在，我们将数据发送到异步方法。

快乐编码！

Answer 7

您可以使用Async-Await：

async function axiosTest() {
  const response = await axios.get(url);
  const data = await response.json();  
}

Answer 8

试试这个，

function axiosTest() {
    axios.get(url)
        .then(response => response.data)
        .catch(error => error);
}

async function getResponse () {
        const response = await axiosTest();
        console.log(response);
}

getResponse()

它可以工作，但您想要获取响应的每个函数都需要是异步函数或使用额外的 .then() 回调。

function axiosTest() {
    axios.get(url)
        .then(response => response.data)
        .catch(error => error);
}

async function getResponse () {
        axiosTest().then(response => {
                console.log(response)
        });
}

getResponse()

如果有人知道避免这种情况的方法，请告诉。

还可以查看 Katsiaryna (Kate) Lupachova 的 article on Dev.to。我认为这会有所帮助。

Answer 9

    async handleResponse(){
      const result = await this.axiosTest();
    }

    async axiosTest () {
    return await axios.get(url)
    .then(function (response) {
            console.log(response.data);
            return response.data;})
.catch(function (error) {
    console.log(error);
});
}

您可以在本文的GET部分中找到检查https://flaviocopes.com/axios/#post-requests网址，并找到一些相关信息。

从Axios API返回数据

9 个答案: