집 >웹 프론트엔드 >JS 튜토리얼 >axios는 http 전송 Post를 처리하고 가져옵니다.

axios는 http 전송 Post를 처리하고 가져옵니다.

php中世界最好的语言원래의: 2018-04-17 15:47:232300검색

이번에는 axios가 http 전송 Post 및 get을 처리하고 axios가 http 전송 Post 및 get을 처리할 때 몇 가지 notes를 가져오겠습니다. 다음은 실제 사례입니다. 살펴보겠습니다.

axios 중국어 문서

https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format axios 문서

http 요청 처리 측면에서 vue-resource를 사용하는 것은 더 이상 권장되지 않으며 대신 최신 axios를 사용하는 것이 좋습니다.

설치

node

npm install axios

를 사용하세요 CDN을 사용하세요

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

기본 사용법방법

요청받기

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });
// Optionally the request above could also be done as
axios.get('/user', {
  params: {
   ID: 12345
  }
 })
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

게시물 요청

 axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
 })
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

여러 요청을 동시에 수행

function getUserAccount() {
 return axios.get('/user/12345');
}
function getUserPermissions() {
 return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
 .then(axios.spread(function (acct, perms) {
  // Both requests are now complete
 }));

이것의 사용법은 실제로 네이티브 ajax와 동일하여 한눈에 이해할 수 있다.

application/x-www-urlencoded 형식으로 게시물 요청을 사용하세요:

var qs = require('qs');
 axios.post('/bbg/goods/get_goods_list_wechat', qs.stringify({"data": JSON.stringify({
  "isSingle": 1,
  "sbid": 13729792,
  "catalog3": 45908012,
  "offset": 0,
  "pageSize": 25
 })}), {
  headers: {
   "BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6",
  }
 })
 .then(function (response) {
  // if (response.data.code == 626) {
   console.log(response);
  // }
 }).catch(function (error) {
  console.log(error);
 });

구체적인 사용법 참조 문서: https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format

참고: 게시 요청의 경우 일반적으로 첫 번째 매개변수는 URL이고, 두 번째 매개변수는 전송할 요청 본문 데이터이며, 세 번째 매개변수는 요청 구성입니다.

추가: axios의 기본값은 application/json 형식입니다. qs.stringify를 적용할 수 없는 경우 요청 헤더가 추가되더라도 최종 콘텐츠 유형 형식은 여전히 json입니다.

게시물 요청의 경우 다음 jquery ajax를 사용하여 다음을 달성할 수도 있습니다.

    $.ajax({
     url:'api/bbg/goods/get_goods_list_wechat',
     data:{
      'data': JSON.stringify({
            "isSingle": 1,
            "sbid": 13729792,
            "catalog3": 45908012,
            "offset": 0,
            "pageSize": 25
          })    
     },  
     beforeSend: function(request) {
      request.setRequestHeader("BBG-Key", "ab9ef204-3253-49d4-b229-3cc2383480a6");
     }, 
     type:'post', 
     dataType:'json', 
     success:function(data){   
      console.log(data);
     },
     error: function (error) {
      console.log(err);
     },
     complete: function () {
     }
    });

분명히 비교를 통해 jquery의 요청 형식이 더 간단하고 jqury의 기본 데이터 형식이 application/x-www-urlencoded라는 점에서 더 편리하다는 것을 알 수 있습니다.

또한 두 개의 동일한 요청에 대해 두 요청이 모두 성공하더라도 두 요청에서 얻은 결과는 다릅니다

보기는 어렵지 않습니다. axios를 사용하여 반환된 결과는 관련 구성, 헤더, 요청 등을 포함하여 jquery의 ajax에서 반환된 구조(실제 결과)보다 하나 이상의 레이어로 압축됩니다.

요청을 받으려면 개인적으로 아래와 같이 axios.get()을 사용하는 것이 좋습니다.

 axios.get('/bbg/shop/get_classify', {
  params: {
   sid: 13729792
  },
  headers: {
   "BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6"
  }
 })
 .then(function (response) {
  if (response.data.code == 130) {
   items = response.data.data;
   store.commit('update', items);
   console.log(items);
  }
  console.log(response.data.code);
 }).catch(function (error) {
  console.log(error);
  console.log(this);
 });

즉, 첫 번째 매개변수는 url이고, 두 번째 매개변수는 구성 개체입니다. 구성 개체에 매개변수를 설정하여 매개변수를 전달할 수 있습니다.

저는 개인적으로 get에 전달된 쿼리 문자열 로 두 번째 매개변수가 없는 반면 post에는 post 데이터로 두 번째 매개변수가 있는 이유를 이해합니다.

get에는 쿼리 문자열이나 get 요청이 없지만 post에는 post 데이터가 있어야 하고 그렇지 않으면 post를 사용할 필요가 없기 때문입니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!