HTTP 요청에 Axios와 jQuery를 사용할 때의 차이점은 무엇입니까?

HTTP 요청에 Axios와 jQuery를 사용할 때의 차이점은 무엇입니까?

저는 jQuery 사용자입니다.하지만 지금은 JWT를 인증에 사용하는 첫 API를 구축하고 있습니다.즉, 이 API를 인증 헤더와 함께 사용하기 위해 온라인에서 찾은 대부분의 튜토리얼은 Axios를 사용하여 이러한 요청을 합니다.

저는 이미 jQuery를 프로젝트에서 사용하고 있기 때문에 간단한 jQuery ajax 호출을 하고 싶은데, 그것을 사용하는 데 큰 단점이 있는지 잘 모르겠습니다.

이것은 jQuery 코드입니다.

$.ajax({
  url: "http://localhost:8080/login",
  type: 'POST',
  data: formData,
  error : function(err) {
    console.log('Error!', err)
  },
  success: function(data) {
    console.log('Success!')
    localStorage.setItem('token', data.id_token);
  }
});

요청 전송

$.ajax({
  url: "http://localhost:8080/login",
  type: 'GET',
  // Fetch the stored token from localStorage and set in the header
  headers: {"Authorization": localStorage.getItem('token')}
});

Axios 기능을 읽은 후 마지막으로 클라이언트 측에서 XSRF에 대한 보호를 지원합니다.jQuery ajax는 XSRF를 지원하지 않습니까?이 보호를 위해 추가 조치를 취해야 합니까?jQuery가 아닌 Axios와 같은 다른 라이브러리를 사용할 가치가 있는 것이 있습니까?

jQuery에서 이를 명시적으로 지원하지 않습니다.$.ajax문서를 참조해 주세요.때문에 될것 같아요.beforeSend★★★★★★★★★★★★★★★★★★★.beforeSendXSRF는 jqHXR을 사용합니다.

@@charlietfl에서도 할 수 언급했습니다.ajaxSend() 경우에 됩니다.$.ajax()

바로 런 this this입니다.axios다음 작업을 수행합니다.

  // `xsrfCookieName` is the name of the cookie to use as a value for xsrf token
  xsrfCookieName: 'XSRF-TOKEN', // default

  // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
  xsrfHeaderName: 'X-XSRF-TOKEN', // default

를 사용하고 할 수 에는 "jQuery"를 합니다.$.ajax().

"jQuery 대신 Axios와 같은 다른 라이브러리를 사용할 가치가 있는 다른 라이브러리가 있을까요?

분명히 말할 수 있을 것 같아요.http 처리 전용 라이브러리는 응용 프로그램 프레임워크 또는 프레젠테이션 라이브러리에서 프로세스를 분리합니다.

jquery에서 CSRF(XSRF) 지원을 추가하는 것은 jquery가 로드된 후(페이지의 메타 태그로 토큰이 렌더링됨) 다음 행을 페이지에 추가하는 것만으로 간단합니다.

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

악시오스가 가치보다 더 골칫거리라는 것을 (과거에) 알게 되었다.리소스 목록을 요청하기 위해 GET 요청을 수행하고, POST/PUT/DELETE 요청을 사용하여 목록의 항목을 변경한 다음 목록을 다시 요청(보기 동기화)하는 등의 간단한 절차를 수행하면 캐시된 데이터가 처리되므로 보기가 변경되지 않습니다.이것은 단지 하나의 예에 불과하다.

편집: 현재 Vue.js 프로젝트를 진행하고 있는데, 악리에 대해 jquery를 고집한 이유가 몇 가지 더 생각났습니다.

부트스트랩 같은 것을 사용하는 경우 jquery가 이미 포함되어 있는데 왜 두 번째 라이브러리를 포함합니까?

마지막으로 몇 개의 클래스를 추가하는 것만으로 표준 html 폼을 ajax 제출 폼으로 변환하는 간단한 스크립트와 오류를 표시하는 부트스트랩 경보를 사용합니다.Larabel 및 (옵션) Vue.js와 함께 사용할 수 있습니다.양식 구성 요소의 스타일링을 처리하여 사용자에게 무슨 일이 일어나고 있는지 알려주기 때문에 매우 편리합니다.서버측 에러를 디버깅 하는 경우는, 폼으로부터 「ajax-submit」클래스를 삭제하기만 하면, 표준 폼의 송신으로 돌아옵니다.스크립트의 보조 조작은 가장 간단하게 jQuery를 사용하여 구현됩니다.나는 여기에 그것을 요지에 넣었다.누군가 유용하게 써주길 바라.

실제로 jQuery를 제외하고 Axios를 사용하여 동등한 스크립트를 작성하는 것이 얼마나 어려운지 알고 싶습니다.

추가 편집:다른 프로젝트에서 Axios를 삭제해야 했습니다.PWA 앱이며, Axios는 서비스 워커의 사용에 필요한 fetch API를 사용할 수 있는 옵션이 없습니다.악시오스를 여기로 데려오기 위해 지스트를 작성했습니다.아마 그것은 누군가에게 도움이 될 것이다.

언급URL : https://stackoverflow.com/questions/45246646/what-are-the-differences-in-using-axios-vs-jquery-for-http-requests