vue 에서 axios 처리 http 에서 요청 한 예시(Post 와 get)

본 고 는 vue 에서 axios 가 http 발송 요청 을 처리 하 는 예시(Post 와 get)를 소개 하고 여러분 에 게 공유 합 니 다.구체 적 으로 다음 과 같 습 니 다.
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>

기본 사용 방법
get 요청

// 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 와 같 아서 한눈 에 알 수 있다.
응용 프로그램/x-www-urlencoded 형식의 post 요청 사용 하기:

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
메모:post 요청 에 대해 일반적인 상황 에서 첫 번 째 매개 변 수 는 url 이 고 두 번 째 매개 변 수 는 보 낼 요청 체 의 데이터 이 며 세 번 째 매개 변 수 는 요청 에 대한 설정 입 니 다.
또한,axios 기본 값 은 application/json 형식 입 니 다.qs.stringify 형식 이 적용 되 지 않 으 면 요청 헤더 의 마지막 content-type 형식 을 추가 하 더 라 도 json 입 니 다.
post 요청 에 대해 서 는 아래 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-ww-urlencoded 라 는 것 을 알 수 있 습 니 다.이런 측면 에서 더욱 편리 할 것 입 니 다.
또한 두 가지 똑 같은 요구 에 대해 모두 성공 을 요 구 했 더 라 도 두 가지 요구 가 얻 은 결 과 는 다르다.다음 과 같다.

보기 어렵 지 않 습 니 다:axios 를 사용 하여 되 돌아 오 는 결 과 는 jquery 의 ajax 가 되 돌아 오 는 구조(실제 결과)보다 한 층 더 포 장 됩 니 다.관련 config,headers,request 등 을 포함 합 니 다.
get 요청 에 대해 저 는 개인 적 으로 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 이 고 두 번 째 매개 변 수 는 설정 대상 입 니 다.우 리 는 설정 대상 에 params 를 설정 하여 파 라 메 터 를 전달 할 수 있 습 니 다.
개인 적 으로 get 은 왜 두 번 째 매개 변 수 를 전달 하 는 조회 문자열 이 없 는 지 이해 하고 post 는 두 번 째 매개 변 수 를 post 의 데이터 로 합 니 다.
get 은 검색 문자열 이 없 을 수도 있 고 get 요청 이 있 을 수도 있 지만 post 는 post 데이터 가 있어 야 합 니 다.그렇지 않 으 면 post 를 사용 할 필요 가 없습니다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.