API 요청에 Axios를 사용하여 건조 상태를 유지하십시오

백엔드 서버와 통신하는 모든 웹 응용 프로그램은 HTTP 요청 없이는 수행 할 수 없습니다. 프론트 엔드에는 데이터가 필요하므로 네트워크 HTTP 요청 (또는 일반적으로 AJAX)을 통해 데이터를 요청하고 서버가 답을 반환합니다. 거의 모든 웹 사이트는 요즘 어떻게 든이 작업을 수행합니다.

대형 웹 사이트의 경우 이와 같은 더 많은 요청을 볼 수 있습니다. 더 많은 데이터, 더 많은 API 및 더 특별한 경우. 웹 사이트의 규모가 커짐에 따라 정리하는 것이 매우 중요합니다. 고전적인 개념은 건조되어 (자신을 반복하지 마십시오), 중복을 방지하기 위해 코드를 추상화하는 과정을 나타냅니다. 일반적으로 코드를 한 번 작성하고 여러 장소에서 사용하고 각 인스턴스가 아닌 단일 장소로 업데이트 할 수 있기 때문에 이상적입니다.

우리는 도서관을 사용하여 우리를 도울 수 있습니다. Ajax에게는 Axios가 인기있는 선택입니다. 이미 익숙 할 수도 있고, 개발 중에 독립형 게시물에 사용하고 요청을받을 수도 있습니다.

설치 및 기본

NPM (또는 원사)을 사용하여 설치할 수 있습니다.

 NPM AXISOS 설치

Axios를 사용한 독립형 게시물 요청은 다음과 같습니다.

 axios.post ( 'https://axios-app.firebaseio.com/users.json', formdata)
  . (res => console.log (res))
  .catch (error => console.log (오류))

기본 JavaScript JavaScript 코드를 실행하는 방법에는 여러 가지가 있습니다. Fetch ()를 주목할 가치가 있습니다. 그렇다면 왜 도서관을 사용합니까? 우선, Fetch의 오류 처리는 매우 이상합니다. 처음부터 Axios를 사용하는 것이 훨씬 쉬워집니다. 비교를보고 싶다면 두 가지 방법을 모두 다루는 기사가 있으며 다른 방법은이 추상 방법의 값에 대해 설명합니다.

Axios를 사용하는 또 다른 이유? 그것은 우리에게 더 건조한 기회를 제공하므로 살펴 보겠습니다.

글로벌 구성

Axios와 함께 제공되는 기본 객체를 통해 설정된 표준 구성을 사용하여 모든 응용 프로그램 요청을 처리하는 전역 구성 (예 : Main.js 파일)을 설정할 수 있습니다.

이 개체에는 다음이 포함됩니다.

• BASEURL : 모든 요청의 접두사로 사용되는 상대 URL 및 각 요청은 URL에 첨부 될 수 있습니다.
• 헤더 : 요청에 따라 설정할 수있는 사용자 정의 헤더
• 시간 초과 : 요청이 중단되는 시점, 일반적으로 밀리 초입니다. 기본값은 0이므로 적용 할 수 없습니다.
• withedentials : 자격 증명이 크로스 사이트 액세스 제어 요청에 사용되어야하는지 여부를 나타냅니다. 기본값은 False입니다.
• ResponseType : 서버가 반환하는 데이터 유형을 나타냅니다. 옵션에는 JSON (기본값), ArrayBuffer, 문서, 텍스트 및 스트림이 포함됩니다.
• ResponseCoding : 응답을 해독하는 데 사용되는 인코딩을 나타냅니다. 기본값은 UTF8입니다.
• xsrfcookiename : XSRF 토큰 값으로 사용되는 쿠키 이름, 기본값은 XSRF-token입니다.
• xsrfheadername : XSRF 토큰 값을 호스팅하는 HTTP 헤더의 이름입니다. 기본값은 x-xsrf-token입니다.
• MaxContentLength : 허용 HTTP 응답 콘텐츠의 최대 크기 (바이트)를 정의합니다.
• MaxBodyLength : 허용 HTTP 요청 컨텐츠의 최대 크기 (바이트)를 정의합니다.

대부분의 경우 BaseUrl, 헤더 및 아마도 타임 아웃 만 사용합니다. 나머지는 스마트 기본값이 있기 때문에 덜 일반적으로 사용되지만 요청을 수정 해야하는 경우 자신의 존재를 아는 것이 좋습니다.

이것이 건조한 일입니다. 각 요청에 대해 API의베이스 url을 반복하거나 각 요청에 필요한 중요한 헤더를 반복 할 필요가 없습니다.

다음은 API에 기본 주소가 있지만 여러 다른 종점이있는 예입니다. 먼저 기본값을 설정합니다.

 // main.js
'axios'에서 axios 가져 오기;

axios.defaults.baseurl = 'https://axios-app.firebaseio.com'// url prefix ac 구성 요소는 이러한 헤더를 설정하지 않고 Axios를 더 간결하게 사용할 수 있지만 여전히 최종 URL 엔드 포인트를 사용자 정의 할 수있는 기회가 있습니다.

// form.js 구성 요소 'axios'에서 axios를 가져옵니다.

내보내기 기본값 {
  방법 : {
    onsubmit () {
      // URL은 이제 https://axios-app.firebaseio.com/users.json입니다
      axios.post ( '/user.json', formdata)
        . (res => console.log (res))
        .catch (error => console.log (오류))
    }
  }
}

참고 : 이 예제는 VUE에 있지만이 개념은 모든 JavaScript 환경으로 확장됩니다.

사용자 정의 인스턴스

사용자 정의 인스턴스를 설정하는 것은 글로벌 구성과 유사하지만 스코프는 지정된 구성 요소로 제한됩니다. 따라서 여전히 건조한 기술이지만 계층 구조입니다.

우리는 새 파일 (이름을 지정하자)에서 사용자 정의 인스턴스를 설정하고 "팔로우"구성 요소로 가져옵니다.

 // authaxios.js
'axios'에서 axios 가져 오기

const custominstance = axis.create ({
  Baseurl : 'https://axios-app.firebaseio.com'
})
custominstance.defaults.headers.post [ 'accept'] = 'application/json'

// 이거 ...
const custominstance = axis.create ({
  Baseurl : 'https://axios-app.firebaseio.com',
  헤더 : { 'accept': 'application/json'}
})

그런 다음이 파일을 양식 구성 요소로 가져옵니다.

 // form.js component // import import axios from './authaxios'

내보내기 기본값 {
  방법 : {
    onsubmit () {
      axios.post ( '/user.json', formdata)
        . (res => console.log (res))
        .catch (error => console.log (오류))
    }
  }
}

인터셉터

인터셉터는 글로벌 구성 또는 사용자 정의 인스턴스가 너무 일반적인 상황을 처리 할 수 ​​있습니다. 즉, 객체에 헤더를 설정하면 영향을받는 구성 요소의 각 요청에 대해 헤더에 적용됩니다. 인터셉터는 객체 속성을 동적으로 변경할 수 있습니다. 예를 들어, 인터셉터에서 선택한 조건에 따라 다른 헤더를 보낼 수 있습니다 (객체에 헤더를 설정하더라도).

인터셉터는 main.js 파일 또는 사용자 정의 인스턴스 파일에있을 수 있습니다. 요청은 전송 된 후 차단되어 응답 처리를 변경할 수 있습니다.

 // 요청 interceptor axios.interceptor.request.use (function (config) {{
  // 요청을 보내기 전에 무언가를 수행합니다. 예를 들어, 특정 baseUrl (config.baseurl === 'https://axios-app.firebaseio.com/users.json')으로 요청에 대해서만 타임 아웃을 삽입합니다.
    config.timeout = 4000
  } 또 다른 {
    반환 구성
  }
  Console.log (config)
  반환 구성;
}, 함수 (오류) {
  // 요청 오류에서 일부 작업을 수행합니다. RETURN PROMITE.REGRECT (error);
});

// 응답 인터셉터 Axios.interceptors.response.use (function (응답) {
  // console.log, header 변경 또는 조건부 동작 추가, 응답 상태에 따라 경로 변경 또는 팝업 경고 상자와 같은 응답 데이터에 대한 특정 작업을 수행하십시오.
    router.replace ( '홈페이지')
  } 또 다른 {
    경고 ( '예외 행동')
  }
  Console.log (응답)
  반환 응답;
}, 함수 (오류) {
  // 응답 오류에서 일부 작업을 수행합니다. RETURN PROMITE.REGRECT (error);
});

이름에서 알 수 있듯이 인터셉터는 요청 및 응답을 절단하여 제공된 조건에 따라 다른 조치를 취합니다. 예를 들어, 위의 요청 인터셉터에서 요청에 특정 BaseURL이있는 경우 조건 시간 초과 만 삽입합니다. 응답의 경우 상태 코드에 따라 경로 변경 또는 경고 상자 표시와 같은 반환 내용을 가로 채고 수정할 수 있습니다. 다른 오류 코드를 기반으로 여러 조건을 제공 할 수도 있습니다.

프로젝트가 확장되면 많은 경로와 중첩 경로가 시작되기 시작하며, 모두 다른 트리거를 기반으로 서버와 통신하며 인터셉터는 매우 유용합니다. 위에서 설정 한 조건 외에도 프로젝트에 따라 인터셉터를 사용해야 할 다른 상황이 많이 있습니다.

흥미롭게도, 우리는 인터셉터를 팝업하여 영향을 미치지 않도록 할 수 있습니다. 인터셉터를 변수에 할당하고 올바르게 명명 된 팝업 메소드를 사용하여 팝업해야합니다.

 const reqinterceptor = axios.interceptor.request.use (function (config) {
  // 요청을 보내기 전에 무언가를 수행합니다. 예를 들어, 특정 baseUrl (config.baseurl === 'https://axios-app.firebaseio.com/users.json')으로 요청에 대해서만 타임 아웃을 삽입합니다.
    config.timeout = 4000
  } 또 다른 {
    반환 구성
  }
  Console.log (config)
  반환 구성;
}, 함수 (오류) {
  // 요청 오류에서 일부 작업을 수행합니다. RETURN PROMITE.REGRECT (error);
});

// 응답 인터셉터 추가 const resinterceptor = axios.resceptor.response.use (function (response) {
  // console.log, header 변경 또는 조건부 동작 추가, 응답 상태에 따라 경로 변경 또는 팝업 경고 상자와 같은 응답 데이터에 대한 특정 작업을 수행하십시오.
    router.replace ( '홈페이지')
  } 또 다른 {
    경고 ( '예외 행동')
  }
  Console.log (응답)
  반환 응답;
}, 함수 (오류) {
  // 응답 오류에서 일부 작업을 수행합니다. RETURN PROMITE.REGRECT (error);
});

axios.interceptors.request.eject (reqinterceptor);
axios.interceptors.request.eject (resinterceptor);

일반적으로 사용되지는 않지만 인터셉터를 조건부 명령문에 넣거나 특정 이벤트에 따라 삭제할 수 있습니다.

바라건대 이것은 AXIOS의 작동 방식과 API 요청 건조 원칙을 유지하기 위해 응용 프로그램에서 사용하는 방법을 잘 이해할 수 있기를 바랍니다. 공통 사용 사례 및 구성을 나열하여 표면을 만지는 동안 Axios는 요청을 취소하고 크로스 사이트 요청 위조를 방지하는 기능 및 기타 놀라운 가능성을 포함하여 문서에서 탐색 할 수있는 다른 많은 이점이 있습니다.

위 내용은 API 요청에 Axios를 사용하여 건조 상태를 유지하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!