Axios와 Fetch의 차이점은 무엇입니까?

가져 오기를 사용하여 웹 서비스를 호출하지만 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하지 않습니다. 또한 fetchJSON 구문 분석에 대한 약속을 사용합니다.

액시오의 장점 :

• 트랜스포머 : 요청하기 전 또는 응답을받은 후 데이터를 변환 할 수 있습니다.
• 인터셉터 : 요청 또는 응답을 완전히 변경할 수 있습니다 (헤더도). 또한 요청이 이루어지기 전 또는 약속이 확정되기 전에 비동기 작업을 수행합니다.
• 내장 XSRF 보호

axios이상 장점fetch