从 Axios API 返回数据

问题在于原来的 axiosTest()函数并没有返回承诺:

function axiosTest() {
// create a promise for the axios request
const promise = axios.get(url)


// using .then, create a new promise which extracts the data
const dataPromise = promise.then((response) => response.data)


// return it
return dataPromise
}


// now we can use that data from the outside!
axiosTest()
.then(data => {
response.json({ message: 'Request received!', data })
})
.catch(err => console.log(err))

函数可以写得更简洁:

function axiosTest() {
return axios.get(url).then(response => response.data)
}

或者使用异步/等待:

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

• 使用承诺指南
• 关于异步函数的信息

axiosTest()需要返回 axios.get，而 axios.get又返回一个 Promise。

从那里，then可以用来执行一个函数时说，Promise解析。

See Promise for more info.

或者，await可以在某些 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>

    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);
});
}

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

IMO 对于你的客户端 js 代码非常重要的经验法则是将数据处理和 ui 构建逻辑分离到不同的函数中，这对于轴系数据获取也是有效的... 这样你的控制流和错误处理将会更加简单和容易管理，从这里可以看出 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>

您可以使用一个简单的回调函数填充所需的数据, 假设我们有一个名为 lst的列表要填充, 我们有一个函数，可以编制化蛹列表,

const lst = [];
const populateData = (data) => {lst.push(data)}

现在我们可以将回调函数传递给正在进行 Axios 调用的函数，并且当我们从响应中获得数据时，我们可以对列表进行填充。

现在我们创建发出请求的函数，并将 populateData作为回调函数传递。

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

Axios 库创建了一个  證()物件。项目承诺是 JavaScriptES6中的一个内置对象。当使用 new 关键字实例化该对象时，它接受一个函数作为参数。这个单独的函数接受两个参数，每个参数也是函数ー解析和拒绝。

承诺执行客户端代码，并且，由于 cool Javascript 异步流，最终可以解决一两件事情，解决方案(通常被认为是一个语义等同于一个承诺的成功) ，或拒绝(广泛认为是一个错误的解决方案)。例如，我们可以保存对某个承诺对象的引用，该对象包含一个函数，该函数将 最终返回一个响应对象(将包含在承诺对象中)。因此，我们可以使用这样的承诺的一种方式是等待承诺解决到 某种反应。

您可能会提出，我们不希望等待几秒钟左右，我们的 API 返回一个调用！我们希望我们的 UI 能够做 同时等待 API 响应的事情。如果失败，我们将有一个非常缓慢的用户界面。那么我们如何处理这个问题呢？

承诺就是 异步的。在负责执行 Javascript 代码的引擎的标准实现中(比如 Node，或者公共浏览器) ，它将在另一个进程中解析，而我们事先并不知道承诺的结果是什么。一个通常的策略是将我们的函数(即类的 React setState 函数) 发送到承诺，根据某种条件解析(取决于我们选择的库)。这将导致我们的本地 Javascript 对象根据承诺解决方案进行更新。因此，与传统 OOP 中的 getter 和 setter 不同，您可以考虑将 发送函数用于异步方法。

在这个示例中，我将使用 Fetch，这样您就可以尝试理解这个承诺中发生了什么，并看看是否可以在您的公理代码中复制我的想法。Fetch 是 基本相似到 Axios，没有先天的 JSON 转换，并且具有解决承诺的不同流程(您应该参考 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 组件的状态为例来看看它是什么样子的..。

一些反应组件

// 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);
}

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

编码愉快！

你可以使用 Async-Await:

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

我知道这个帖子有些年头了。但是我曾经看到过一些家伙尝试使用异步来解决这个问题，他们等待着，但是却得到了错误的答案。这应该可以清除任何新的参考

更新: 2022年5月 这个答案仍然有很多人感兴趣，并且已经更新为使用箭头函数

const axiosTest = async () {
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);
}
}

试试这个,

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。我认为它会有所帮助。

经过6个小时的努力，我意识到这只是一个简单的问题。如果你正在干扰公理的生命周期，你可能已经忘记了这句话:

componentDidMount() {
this.requestInterceptor = axios.interceptors.request.use((request) => {
this.updateApiCallFor(request.url, true);
return request;
});


this.responseInterceptor = axios.interceptors.response.use((response) => {
this.updateApiCallFor(response.config.url, false);


return response; // THIS LINE IS IMPORTANT !


}, (error) => {
this.updateApiCallFor(error.config.url, false);
throw error;
});

使一个函数返回一个结果

// https://www.npmjs.com/package/axios
const axios = require('axios')


/* --- */


async function axiosTest() {


let promiseAxios = axios.get( 'https://example.com' )


/* --- */


console.log( await promiseAxios )
        

}


/* --- */


axiosTest()

// https://www.npmjs.com/package/axios
const axios = require('axios')


/* --- */


async function axiosTest() {


console.log( await promiseAxios() )
        

}


/* --- */


axiosTest()


/* --- */


// create function for promise axios and return it
function promiseAxios() {


return axios.get( 'https://example.com' )
    

}