VUE 더 좋 은 ajax 업로드 처리 axios.js 구현 코드

vue 가 2.0 으로 업 데 이 트 된 후에 저 자 는 vue-resource 에 대한 업데이트 가 아니 라 추천 하 는 axios 라 고 선언 했 습 니 다.얼마 전에 사 용 했 습 니 다.지금 은 기본 적 인 용법 을 말씀 드 리 겠 습 니 다.
우선 axios 를 도입 하 는 것 입 니 다.es6 를 사용 하면 axios 모듈 만 설치 하면 됩 니 다.

import axios from 'axios';
//    
npm install axios
// 
bower install axios

물론 script 으로 도 도입 할 수 있 습 니 다.

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

axios 는 몇 가지 요청 방식 을 제공 합 니 다.

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

여기 config 는 요청 헤더,baseURL 등 기본 정보 에 대한 설정 입 니 다.물론 여기 서 비교적 편리 한 설정 항목 을 제공 합 니 다.

//config
import Qs from 'qs'
{
 //     ，      ， axios.get(url,config);   url    config  url
 url: '/user',

 //       
 method: 'get', // default
 //   url  
 baseURL: 'https://some-domain.com/api/',
　　
　　　　
 transformRequest: [function (data) {
  //                    ，  form-data    ，           Qs（       axios         ，       ）
　　data = Qs.stringify({});
  return data;
 }],

 transformResponse: [function (data) {
  //            

  return data;
 }],

 //      
 headers: {'X-Requested-With': 'XMLHttpRequest'},

 //parameter  
 params: {
  ID: 12345
 },

 //post  ，  axios.post(url,{},config);                 ，     
 data: {
  firstName: 'Fred'
 },

 //      
 timeout: 1000,
 //      
 responseType: 'json', // default


}

프로필 이 있 으 면 우 리 는 많은 추가 처리 코드 를 줄 이 고 아름 답 게 사용 할 수 있 습 니 다.

axios.post(url,{},config)
  .then(function(res){
    console.log(res);
  })
  .catch(function(err){
    console.log(err);
  })
//axios         promise,             catch    。
//                 

axios.all([get1(), get2()])
 .then(axios.spread(function (res1, res2) {
  //              ，    catch  
 }));

마지막 으로 설정 항목 을 말씀 드 리 겠 습 니 다.위 에서 말 한 것 은 추가 설정 입 니 다.따로 쓰 고 싶 지 않 으 면 전역 을 직접 설정 할 수 있 습 니 다.

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

//         
var instance = axios.create({
 baseURL: 'https://api.example.com'
});

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.