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

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 요청 라이브러리입니다 ...

I end up with the same doubt but the table in this post makes me go with isomorphic-fetch. Which is fetch but works with NodeJS.

http://andrewhfarmer.com/ajax-libraries/

---

The link above is dead The same table is here: https://www.javascriptstuff.com/ajax-libraries/

Or here:

---

According to mzabriskie on GitHub:

Overall they are very similar. Some benefits of axios:

• Transformers: allow performing transforms on data before a request is made or after a response is received

• Interceptors: allow you to alter the request or response entirely (headers as well). also, perform async operations before a request is made or before Promise settles

• Built-in XSRF protection

please check Browser Support Axios

I think you should use axios.

---

One more major difference between fetch API & axios API

• While using service worker, you have to use fetch API only if you want to intercept the HTTP request
• Ex. While performing caching in PWA using service worker you won't be able to cache if you are using axios API (it works only with fetch API)

---

Axios is a stand-alone 3rd party package that can be easily installed into a React project using NPM.

The other option you mentioned is the fetch function. Unlike Axios, fetch() is built into most modern browsers. With fetch you do not need to install a third party package.

So its up to you, you can go with fetch() and potentially mess up if you don't know what you are doing OR just use Axios which is more straightforward in my opinion.

---

In addition... I was playing around with various libs in my test and noticed their different handling of 4xx requests. In this case my test returns a json object with a 400 response. This is how 3 popular libs handle the response:

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

Of interest is that request-promise-native and axios throw on 4xx response while node-fetch doesn't. Also fetch uses a promise for json parsing.

---

Benefits of axios:

• Transformers: allow performing transforms on data before request is made or after response is received
• Interceptors: allow you to alter the request or response entirely (headers as well). also perform async operations before request is made or before Promise settles
• Built-in XSRF protection

Advantages of axios over fetch

참고URL : https://stackoverflow.com/questions/40844297/what-is-difference-between-axios-and-fetch