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

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

Fetch를 사용하여 웹 서비스를 호출합니다만, Axios의 도움으로 할 수 있는 것과 같습니다.그래서 나는 지금 혼란스럽다.Axios로 할까요, 아니면 Fetch로 할까요?

Fetch와 Axios의 기능은 매우 비슷하지만 하위 호환성을 위해 Axios가 더 잘 작동하는 것 같습니다(예를 들어 IE 11에서는 Fetch가 작동하지 않습니다).

또, 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
}

그래서:

• Fetch의 본문 = Axios의 데이터
• Fetch의 본문을 문자열화해야 합니다. Axios의 데이터에 개체가 포함되어 있습니다.
• 가져오기 요청 개체에 URL이 없고 Axios 요청 개체에 URL이 있습니다.
• Fetch request 함수는 url을 파라미터로 포함하며, Axios request 함수는 url을 파라미터로 포함하지 않습니다.
• 응답 개체에 ok 속성이 포함되어 있으면 가져오기 요청이 정상이고 상태가 200이면 Axios 요청이 정상입니다.텍스트는 'OK'입니다.
• json 객체 응답을 가져오려면: fetch에서 응답 객체의 json() 함수를 호출하고 Axios에서 응답 객체의 데이터 속성을 가져옵니다.

HTTP 요청 라이브러리입니다...

같은 의심을 하게 되는데 이 게시물 표에서 보면isomorphic-fetch 즉.어느 것이fetch, NodeJS NodeJ에서는 합니다.스스 스스 스스무리

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

---

위의 링크는 정지되어 있습니다.같은 표가 여기 있습니다.https://www.javascriptstuff.com/ajax-libraries/

또는 여기:

GitHub의 mzabriskie에 따르면:

전반적으로 그들은 매우 유사하다.Axios의 장점:

• 트랜스포머: 요청이 이루어지기 전 또는 응답이 수신된 후에 데이터에 대한 변환을 수행할 수 있습니다.

• 가로채기: 요청 또는 응답(헤더)을 전체적으로 변경할 수 있습니다.또한 요청이 이루어지기 전 또는 Promise가 정착하기 전에 비동기 작업을 수행합니다.

• 내장 XSRF 보호

브라우저 지원 Axios를 확인하십시오.

악리를 사용해야 할 것 같아요.

fetch API와 axios API의 또 다른 큰 차이점

• 서비스 워커를 사용하는 동안 HTTP 요청을 대행 수신하는 경우에만 fetch API를 사용해야 합니다.
• 예. 서비스 워커를 사용하여 PWA에서 캐싱을 수행하는 동안 axios API를 사용하는 경우 캐싱할 수 없습니다(fetch API에서만 사용 가능).

Axios는 독립형 서드파티 패키지로 NPM을 사용하여 React 프로젝트에 쉽게 설치할 수 있습니다.

가져오다와는 달리 악시오스는fetch()는 대부분의 최신 브라우저에 내장되어 있습니다.fetch를 사용하면 서드파티 패키지를 설치할 필요가 없습니다.

때문에 에 따라 갈 수 .fetch()만약 당신이 무엇을 하고 있는지 모른다면 아마 망칠 수도 있고, 내 생각에 좀 더 직설적인 Axios를 사용할 수도 있다.

1. API 가져오기. JSON Object 속성에서 응답 데이터를 가져오려면 두 가지 약속을 처리해야 합니다.한편, Axi는 JSON 오브젝트가 됩니다.

2. 또한 오류 처리는 캐치 블록의 서버 측 오류를 처리하지 않으므로 fetch()에서 반환된 Promise는 응답이 HTTP 404 또는 500인 경우에도 HTTP 오류 상태에서 거부되지 않습니다.대신 정상적으로 해결되며(OK 상태가 false로 설정), 네트워크 장애 시 또는 요구가 완료되지 않은 경우에만 거부됩니다.공리에서는 catch block의 모든 오류를 잡을 수 있습니다.

axios를 사용하여 가로채기, 헤더 설정, 쿠키 설정 및 오류 처리를 하는 것이 좋습니다.

참조

Axios의 이점:

• 트랜스포머: 요청이 이루어지기 전 또는 응답을 받은 후에 데이터에 대해 변환을 수행할 수 있습니다.
• 가로채기: 요청 또는 응답(헤더)을 전체적으로 변경할 수 있습니다.또한 요청이 이루어지기 전 또는 Promise가 정착하기 전에 비동기 작업을 수행합니다.
• 내장 XSRF 보호

점점의 axios에 걸쳐서fetch

게다가...테스트에서 여러 libs를 가지고 놀다가 4xx 요청의 처리 방법이 다르다는 것을 알게 되었습니다.이 경우 테스트에서는 응답이 400인 json 개체를 반환합니다.일반적인 3가지 libs는 다음과 같이 응답을 처리합니다.

// 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""에 하여 ""에 합니다.node-fetch그렇지 않다. 한 also도.fetch조손

fetch와 관련하여 우리는 두 가지 약속을 처리해야 합니다.Axios를 사용하면 응답 객체 데이터 속성 내의 JSON 결과에 직접 액세스할 수 있습니다.

을 사용하다 보통 첨부 파일과 여러 입력 필드를 포함하는 Ajax를 통해 양식을 보내는 것입니다.한 워크플로우(HTML/PHP 「있다」를 사용했습니다(HTML/PHP/JQuery).에서는$.ajax()서버상의 클라이언트와 PHP에서 완전히 성공했습니다.

다트/플룻터에는 악리소스를 사용했지만 지금은 웹사이트를 구축하기 위해 리액션을 배우고 있습니다.JQuery는 말이 되지 않습니다.

문제는 정상적인 입력 필드를 게시하고 동일한 형식으로 파일을 업로드할 때 다른 쪽에 있는 PHP를 사용하는 것이 골칫거리라는 것입니다.나는 노력했다.$_POST그리고.file_get_contents("php://input")PHP에서는 FormData를 사용하여 Axios에서 전송하거나 json constructure를 사용하지만 파일 업로드와 입력 필드를 모두 얻을 수 없습니다.

한편, Fetch에서는, 다음의 코드에 성공했습니다.

var formid = e.target.id;

// populate FormData
var fd    = buildFormData(formid);       

// post to remote
fetch('apiurl.php', {
  method: 'POST',
  body: fd,
  headers: 
  {
     'Authorization' : 'auth',
     "X-Requested-With" : "XMLHttpRequest"
  }
})    

PHP측에서는, 다음의 방법으로 업로드를 취득할 수 있습니다.$_FILES$_POST를 통해 다른 필드 데이터를 처리합니다.

  $posts = [];
  foreach ($_POST as $post) {
      $posts[] =  json_decode($post);
  }

Axios는 약속에 기반한 HTTP 클라이언트 라이브러리이며 Fetch는 API 요청을 하기 위한 Javascript API입니다.

1. 주요 차이점은 브라우저 지원입니다.Axios는 IE를 포함한 모든 브라우저를 지원하지만 Fetch는 최신 브라우저에서만 지원되며 IE는 지원하지 않습니다.

참조 링크: https://github.com/axios/axios#browser-support

https://caniuse.com/fetch

2. Axios는 fetch API에 비해 오류 처리가 우수합니다.Axios는 400~500 범위의 상태 코드 오류를 발생시킬 수 있지만 fetch API에서는 수동으로 오류를 처리해야 합니다.자세한 것은, https://bariablogger.in/f/axios-vs-fetch-react 를 참조해 주세요.

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