node.js에서 axios를 사용하는 방법

이 글은 주로 node.js에서 axios를 사용하면서 경험한 내용을 요약해서 소개하고, 그 과정에서 발생한 오류를 분석한 내용이니 참고해주세요.

Axios는 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 라이브러리입니다. Youda의 추천으로 인해 Axios는 점점 더 인기를 얻고 있습니다. 최근 프로젝트에서 Axios를 사용하면서 몇 가지 문제에 직면했는데, 이번 기회에 이를 요약해서 설명하겠습니다. 혹시 잘못된 점이 있으면 언제든지 수정해 주시기 바랍니다.器 기능 浏 브라우저 끝에서 XMLHTTPREQUESTS 요청 시작

HTTP 요청을 시작하는 노드 계층 Promise API 지원

차단 요청 및 응답

변환 요청 및 응답 데이터

JSON 데이터 취소

클라이언트는 XSRF(Cross RF)에 대한 방어를 지원합니다. -사이트 요청 위조)

호환

npm

npm install axios

bower

bower install axios

cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

을 사용하여 요청을 시작

GET

axios.get('/user?ID=123')
  .then( res => {
    console.info(res)
  }).catch( e => {
    if(e.response){
    //请求已发出，服务器返回状态码不是2xx。
      console.info(e.response.data)
      console.info(e.response.status)
      console.info(e.response.headers)
    }else if(e.request){
      // 请求已发出，但没有收到响应
      // e.request 在浏览器里是一个XMLHttpRequest实例，
      // 在node中是一个http.ClientRequest实例
      console.info(e.request)
    }else{
      //发送请求时异常，捕捉到错误
      console.info('error',e.message)
    }
    console.info(e.config)
  })
// 等同以下写法
axios({
  url: '/user',
   method: 'GET',
  params: {
    ID: 123
  }
}).then( res => {
  console.info(res)
}).catch( e=> {
  console.info(e)
})

POST

axios.post('/user', {
  firstName: 'Mike',
  lastName: 'Allen'
}).then( res => {
  console.info(res)
}).catch( e => {
  console.info(e)
})
// 等同以下写法
axios({
  url: '/user',
  method: 'POST',
  data: {
    firstName: 'Mike',
    lastName: 'Allen'
  }
}).then( res => {
  console.info(res)
}).catch( e => {
  console.info(e)
})

메모

Params는 GET 메소드를 사용하여 매개변수를 전달할 때 사용되며 공식 문서에서는 다음과 같이 소개합니다. params는 요청과 함께 전송되는 URL 매개변수입니다. 일반 개체 또는 URLSearchParams 개체여야 합니다. 번역: params는 요청의 URL 링크에 매개변수로 전송되며 일반 객체 또는 URLSearchParams 객체여야 합니다. 일반 객체는 JSON 형식으로 정의된 일반 객체 또는 new Object()에 의해 생성된 간단한 객체를 참조하는 반면, URLSearchParams 객체는 URLSearchParams에 의해 정의된 몇 가지 실용적인 메서드를 사용하여 URL의 쿼리 문자열을 처리하는 데 사용할 수 있는 객체를 참조합니다. 즉, params 매개변수가 /user?ID=1&name=mike&sex=male 형식으로 전달됩니다. POST를 사용할 때 해당 매개변수 전송은 데이터를 사용하며 데이터는 요청 본문으로 전송됩니다. PUT, PATCH 및 기타 요청 방법도 이 형식을 사용합니다. 한 가지 주목할 점은 axios에서 POST의 기본 요청 본문 유형은 Content-Type: application/json(JSON 사양이 널리 사용됨)이라는 것입니다. 이는 또한 가장 일반적인 요청 본문 유형이기도 합니다. 이는 직렬화된 json 형식이 사용됨을 의미합니다. { "name" : "mike", "sex" : "male" } 과 같은 매개변수를 동시에 전달하려면 백그라운드에서 @RequestBody를 지원하는 형식으로 매개변수를 수신해야 합니다. 그렇지 않으면 프런트엔드 매개변수가 올바르게 전달되고 배경이 상황을 수신하게 됩니다.

유형을 Content-Type: application/x-www-form-urlencoded(기본 브라우저 지원)로 설정하려는 경우 axios는 다음과 같은 두 가지 방법을 제공합니다.

Browser side

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/user', params);

그러나 모든 브라우저는 URLSearchParams를 지원합니다. 호환성을 확인하려면 caniuse.com을 확인하세요. 그러나 여기에는 Polyfill(폴리필: 브라우저가 지원하지 않는 기본 API를 구현하는 데 사용되는 코드)이 있습니다. 이는 모호하게 패치로 이해될 수 있습니다. 동시에 폴리필은 글로벌 환경 중간에 있습니다.

또는 qs 라이브러리를 사용하여 데이터 형식을 지정할 수도 있습니다. 기본적으로 qs 라이브러리는 axios 설치 후 사용할 수 있습니다.

const qs = require('qs');
axios.post('/user', qs.stringify({'name':'mike'}));

노드 레이어

노드 환경에서는 쿼리스트링을 사용할 수 있습니다. 마찬가지로 qs를 사용하여 데이터 형식을 지정할 수도 있습니다.

const querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({'name':'mike'}));

Supplement

또 다른 일반적인 요청 본문 유형, 즉 multipart/form-data(브라우저에서 기본적으로 지원됨)가 있는데, 이는 양식 데이터를 제출하는 데 일반적으로 사용되는 형식입니다. 데이터가 '&'로 구분된 키-값 쌍으로 인코딩되고 키와 값은 '='으로 구분되는 x-www-form-urlencoded와 대조됩니다. 알파벳이나 숫자가 아닌 문자는 백분율로 인코딩됩니다(URL 인코딩). 이것이 바로 이 유형이 이진 데이터를 지원하지 않는 이유입니다(대신 multipart/form-data를 사용해야 함).

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련글 :

vue+vuex+axios+echarts에서 중국지도 구현하는 방법

입력방법으로 입력창이 막히는 문제 해결

입력창이 막히는 문제 해결 소프트 키보드가 js

의 입력 상자를 차단합니다

Angular2에서 구성 요소 상호 작용을 구현하는 방법

위 내용은 node.js에서 axios를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!