>  기사  >  웹 프론트엔드  >  vue 2.x에서 axios를 사용하여 get 및 post 메소드를 캡슐화하는 방법

vue 2.x에서 axios를 사용하여 get 및 post 메소드를 캡슐화하는 방법

亚连
亚连원래의
2018-06-02 17:07:462374검색

이 글에서는 vue 2.

import axios from 'axios'
import qs from 'qs'
export class HttpService {
  Get(url, data) {
    return new Promise((resolve, reject) => {
      axios.get(url, {
        params: data
      }).then((res) => {
        if (res) {
          //成功回调
          resolve(res);
        }
      }).catch((error) => {
        reject(error);
      })
    })
  }
  Post(url, data) {
    return new Promise((resolve, reject) => {
      axios.post(url, qs.stringify(data), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          'Accept': 'application/json'
        }
      }).then((res) => {
        if (res) {
          //成功回调
          resolve(res);
        }
      }).catch((error) => {
        reject(error);
      })
    })
  }
}

postfile 메소드

PostFlie(url, data) {
    return new Promise((resolve, reject) => {
      //根据data对象生成FormData对象
      var temp = new FormData();
      for (var t in data) {
        temp.append(t, data[t]);
      }
      axios.post(url, temp).then((res) => {
        if (res) {
            resolve(res.Data);
        }
      }).catch((error) => {
        reject(error);
      })
    })
  }
위 내용이 모두를 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vue에서 이미지 및 파일 업로드를 구현하는 샘플 코드

NodeJS 상위 프로세스 및 하위 프로세스 리소스 공유 원칙 및 구현 방법

휴대폰 번호, 이메일 정기 확인 및 60s 전송 확인 vue 코드 예제

위 내용은 vue 2.x에서 axios를 사용하여 get 및 post 메소드를 캡슐화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.