Axios API에서 데이터를 반환하는 중
노드를 사용하려고 합니다.API 요청을 작성 및 수신하기 위한 JS 애플리케이션입니다.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를 통해서인데, 이것은 내 상황에서 도움이 되지 않습니다.
문제는 원본이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
}
저는 이 게시물이 오래된 것을 알고 있습니다.하지만 저는 비동기식으로 대답하고 기다리지만 틀리는 남자들의 시도를 여러 번 보았습니다.그러면 새 참조에 대해 삭제됩니다.
업데이트: 2023년 5월 이 답변은 여전히 많은 관심을 끌고 있으며 화살표 기능을 사용하도록 업데이트/수정했습니다.
const axiosTest = async () => {
try {
// use data destructuring to get data from the promise object
const { data: response } = await axios.get(url);
return response;
} catch (error) {
console.log(error);
}
};
기능으로 수 . 를 들어, 원는데이콜간기채수다있라는 이름의 해 보겠습니다 예를 들어, 이름이 붙은 목록이 있다고 가정해 보겠습니다.lst, list를 있습니다.
const lst = [];
const populateData = (data) => {lst.push(data)}
이제 우리는 콜백 함수를 액시오스가 호출하는 함수로 전달할 수 있고 응답에서 데이터를 얻을 때 목록을 채울 수 있습니다.
전달하는 을 만듭니다.populateData콜백 함수로 사용됩니다.
function axiosTest (populateData) {
axios.get(url)
.then(function(response){
populateData(response.data);
})
.catch(function(error){
console.log(error);
});
}
axios 라이브러리는 Promise() 개체를 만듭니다.Promise는 JavaScript ES6의 기본 제공 개체입니다.새 키워드를 사용하여 이 개체를 인스턴스화하면 함수를 인수로 사용합니다.이 단일 함수는 두 개의 인수를 사용하며, 각 인수도 함수입니다. 즉, 해결 및 거부입니다.
약속은 클라이언트 사이드 코드를 실행하며, 자바스크립트의 비동기 흐름이 냉각되기 때문에 최종적으로 한 가지 또는 두 가지를 해결할 수 있습니다. 즉, 일반적으로 의미론적으로 약속의 성공과 동등한 것으로 간주되는 해결책 또는 거부(오류 해결책으로 널리 간주됨).예를 들어 일부 Promise 개체에 대한 참조를 보유할 수 있습니다. 이 개체는 응답 개체(Promise 개체에 포함됨)를 반환하는 함수로 구성됩니다.그래서 우리가 그러한 약속을 사용할 수 있는 한 가지 방법은 약속이 어떤 종류의 반응으로 해결되기를 기다리는 것입니다.
API가 호출에 응답할 때까지 몇 초도 기다리지 않을 것이라고 제안할 수 있습니다.우리는 API 응답을 기다리는 동안 UI가 작업을 수행할 수 있기를 원합니다.사용자 인터페이스가 매우 느리다는 것에 실패했습니다.그러면 우리는 이 문제를 어떻게 처리해야 할까요?
약속은 비동기식입니다.자바스크립트 코드 실행을 담당하는 엔진의 표준 구현(예: 노드 또는 공통 브라우저)에서는 약속의 결과가 무엇인지 미리 알 수 없는 동안 다른 프로세스에서 해결됩니다.일반적인 전략은 (라이브러리 선택에 따라) 어떤 조건에 따라 해결된 약속에 함수(즉, 클래스에 대한 ReactsetState 함수)를 보내는 것입니다.이로 인해 약속 해결을 기반으로 로컬 Javascript 개체가 업데이트됩니다.따라서 기존 OOP에서 게터와 세터 대신 비동기 방식으로 보낼 수 있는 함수를 생각할 수 있습니다.
이 예에서 Fetch를 사용하여 약속에서 무슨 일이 일어나고 있는지 이해하고 액시오스 코드 내에서 내 아이디어를 복제할 수 있는지 확인할 수 있습니다.Fetch는 기본적으로 기본적으로 JSON 변환이 없는 axios와 비슷하며 약속을 해결하기 위한 흐름이 다릅니다(학습하려면 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);
}
궁극적으로 데이터를 "반환"하지 않습니다. 제 말은 데이터를 "반환"할 수는 있지만 사고 방식을 바꾸는 것이 더 관용적입니다.이제 우리는 비동기식 방식으로 데이터를 보내고 있습니다.
해피 코딩!
axiosTest().axios.get 것은차를례로반다니합환그▁a다니▁which▁in를반합환▁returns를 반환합니다.Promise.
거서부터.then 경 함 실 수 있 사 습Promise해결됩니다.
자세한 내용은 을 참조하십시오.
에대신,await일부 기능의 범위 내에서 사용할 수 있습니다.
// 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>IMO 클라이언트 측 Js 코드에서 매우 중요한 경험칙은 데이터 처리 및 UI 구축 로직을 서로 다른 펑션으로 분리하는 것이며, 이는 axios 데이터 가져오기에도 유효합니다...이러한 방식으로 제어 흐름과 오류 처리는 이 OK 페치에서 볼 수 있듯이 훨씬 더 간단하고 쉽게 관리할 수 있습니다.
<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>
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;
});
비동기는 함수가 약속을 반환하도록 합니다.
wait는 함수가 약속을 기다리게 합니다.
코드 비동기/비동기
// 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()
replit.com 스택 오버플로 - Axios API에서 데이터를 반환하는 중
replit.com 스택 오버플로 - 비동기에서 값을 반환하는 방법
코드 비동기/비동기 답례로
// 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' )
}
replit.com 스택 오버플로 - Axios API에서 데이터 반환 - 반환
replit.com 스택 오버플로 - 비동기에서 값을 반환하는 방법 - 반환
이거 해봐요.
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()
이것을 피할 방법을 아는 사람이 있다면 꼭 말해주세요.
또한 Dev.to 에서 Katsiaryna(Kate) Lupachova의 기사를 확인하십시오.도움이 될 것 같습니다.
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-debugurl을 확인하고 관련 정보를 찾을 수 있습니다.
비동기 - 대기:
async function axiosTest() {
const response = await axios.get(url);
const data = await response.json();
}
언급URL : https://stackoverflow.com/questions/48980380/returning-data-from-axios-api
'source' 카테고리의 다른 글
| 쉼표 연산자에서 'return', 'continue' 또는 'break'이 작동하지 않는 이유는 무엇입니까? (0) | 2023.07.30 |
|---|---|
| C - 문자열을 문자열 배열로 분할 (0) | 2023.07.30 |
| socket.io 방 또는 네임스페이스? (0) | 2023.07.30 |
| MSSQL 증분 정수 열이 있는 문 선택...일반적이지 않은 (0) | 2023.07.30 |
| 차체에 새 필드 추가 예외 스프링 받침대 (0) | 2023.07.30 |