가져 오기를 사용하여 웹 서비스를 호출하지만 axios의 도움으로 할 수있는 것과 동일합니다. 그래서 지금 혼란스러워합니다. 액시오나 페치 중 하나를 선택해야합니까?
답변
가져 오기 및 Axios의이 기능면에서 매우 유사하지만, 더 이전 버전과의 호환성을 위해 Axios의 잘 작동하는 것 같다 (가져 오기 예를 들어 IE 11에서 작업을하지 않는, 확인 이 게시물을 )
또한 JSON 요청으로 작업하는 경우 다음과 같은 차이점이 있습니다.
JSON 게시 요청 가져 오기
let url = 'https://someurl.com';
let options = {
method: 'POST',
mode: 'cors',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json;charset=UTF-8'
},
body: JSON.stringify({
property_one: value_one,
property_two: value_two
})
};
let response = await fetch(url, options);
let responseOK = response && response.ok;
if (responseOK) {
let data = await response.json();
// do something with data
}
Axios JSON 게시 요청
let url = 'https://someurl.com';
let options = {
method: 'POST',
url: url,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json;charset=UTF-8'
},
data: {
property_one: value_one,
property_two: value_two
}
};
let response = await axios(options);
let responseOK = response && response.status === 200 && response.statusText === 'OK';
if (responseOK) {
let data = await response.data;
// do something with data
}
그래서:
- 페치 바디 = Axios 데이터
- 페치의 몸체는 스트링 화 되어야하며 , Axios의 데이터는 객체를 포함 합니다
- 가져 오기 에 요청 오브젝트에 URL이없고 Axios 에 요청 오브젝트에 URL 이 있습니다
- 페치 요청 기능은 URL을 매개 변수로 포함하고 , Axios 요청 기능 은 URL을 매개 변수로 포함하지 않습니다 .
- 요청이 가져 오기 확인 응답 객체가 포함 된 경우 확인 속성을 , Axios의 요청은 확인 될 때 상태가 200 과 하는 statusText이 ‘OK’입니다
- json 객체 응답을 얻으려면 : 가져 오기 에서 응답 객체 의 json () 함수 를 호출하십시오 . Axios 에서는 응답 객체의 data 속성 을 가져옵니다 .
도움이 되었기를 바랍니다.
답변
그들은 HTTP 요청 라이브러리입니다 …
나는 같은 의심으로 끝나지만이 게시물 의 표 는 나를 따라갑니다 isomorphic-fetch
. 어느 fetch
것이지만 NodeJS와 함께 작동합니다.
http://andrewhfarmer.com/ajax-libraries/
위의 링크가 죽었습니다 같은 테이블이 있습니다 : https://www.javascriptstuff.com/ajax-libraries/
답변
mzabriskie 에 따르면 GitHub의에 :
전반적으로 그들은 매우 유사합니다. 액시 오스의 장점 :
트랜스포머 : 요청하기 전 또는 응답을받은 후 데이터에 대한 변환을 수행 할 수 있습니다.
인터셉터 : 요청 또는 응답을 완전히 변경할 수 있습니다 (헤더도). 또한 요청하기 전 또는 약속이 확정되기 전에 비동기 작업을 수행하십시오.
내장 XSRF 보호
브라우저 지원 Axios를 확인하십시오
나는 당신이 axios를 사용해야한다고 생각합니다.
답변
또 하나 개의 큰 차이 API 및 Axios의 API를 가져 사이
- 서비스 워커를 사용하는 동안 페치 API 만 사용해야합니다. HTTP 요청을 인터셉트하려는 경우 합니다.
- 전의. Axios API를 사용하는 경우 서비스 워커를 사용하여 PWA에서 캐싱을 수행하는 동안 캐시 할 수 없습니다 (가져 오기 API에서만 작동 함)
답변
Axios는 NPM을 사용하여 React 프로젝트에 쉽게 설치할 수있는 독립형 타사 패키지입니다.
언급 한 다른 옵션은 페치 기능입니다. Axios와 달리 fetch()
대부분의 최신 브라우저에 내장되어 있습니다. 가져 오기를 사용하면 타사 패키지를 설치할 필요가 없습니다.
따라서 fetch()
당신이하는 일을 모르거나 내 의견에 더 직접적인 Axios를 사용하면 당신에게 다가 갈 수 있습니다 .
답변
또한 … 내 테스트에서 다양한 라이브러리를 가지고 놀고 있었고 4xx 요청의 다른 처리를 발견했습니다. 이 경우 내 테스트는 400 응답으로 json 객체를 반환합니다. 다음은 인기있는 3 개의 lib가 응답을 처리하는 방법입니다.
// request-promise-native
const body = request({ url: url, json: true })
const res = await t.throws(body);
console.log(res.error)
// node-fetch
const body = await fetch(url)
console.log(await body.json())
// Axios
const body = axios.get(url)
const res = await t.throws(body);
console.log(res.response.data)
관심의 대상은 request-promise-native
및 axios
동안 4XX 응답에 던져 node-fetch
하지 않습니다. 또한 fetch
JSON 구문 분석에 대한 약속을 사용합니다.
답변
액시오의 장점 :
- 트랜스포머 : 요청하기 전 또는 응답을받은 후 데이터를 변환 할 수 있습니다.
- 인터셉터 : 요청 또는 응답을 완전히 변경할 수 있습니다 (헤더도). 또한 요청이 이루어지기 전 또는 약속이 확정되기 전에 비동기 작업을 수행합니다.
- 내장 XSRF 보호