Vue Axios 기본 용법

Axios
Axios 는 promise 기반 HTTP 라 이브 러 리 로 브 라 우 저 와 node.js 에 사용 할 수 있 습 니 다.npm 를 통 해 axios 를 사용 할 수 있 습 니 다.

npm install axios

프로젝트 에서 cdn 을 사용 하여 axios 를 도입 할 수도 있 습 니 다.
get 요청

//    post get  ,    get  
axios('/home');

//   id get  
axios.get('/home?ID=001')
    .then(function(res){
        console.log(res);
    })
    .catch(function(error){
        console.log(error);
    });

//          
axios.get('/home',{
    params:{
        ID:001
    }
}).then(function(res){
    console.log(res);
}).catch(function(error){
    console.log(error);
});

post 요청

axios.post('/home',{
    name:'name',
    age:18
}).then(function(res){
    console.log(res);
}).catch(function(error){
    console.log(error);
})

여러 개의 동시 요청 을 실행 합 니 다.
여러 개의 병렬 요청 을 실행 할 때 axios.all 과 axios.spread 를 사용 해 야 합 니 다.

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) {
    //            
  }));

사용자 정의 설정
xios.create 는 사용자 정의 요청 인 스 턴 스 를 만 들 수 있 습 니 다.사용자 정의 인 스 턴 스 에서 각 설정 항목 을 다시 써 서 자신의 요 구 를 만족 시 킬 수 있 습 니 다.다음은 사용자 정의 설정 옵션 입 니 다.

{
  // `url`           URL
  url: '/user',

  // `method`            
  method: 'get', //     get

  // `baseURL`       `url`   ，   `url`       URL。
  //           `baseURL`     axios           URL
  baseURL: 'https://some-domain.com/api/',

  // `transformRequest`           ，      
  //      'PUT', 'POST'   'PATCH'        
  //                  ，  ArrayBuffer，  Stream
  transformRequest: [function (data) {
    //   data         

    return data;
  }],

  // `transformResponse`      then/catch  ，        
  transformResponse: [function (data) {
    //   data         

    return data;
  }],

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

  // `params`             URL   
  //           (plain object)  URLSearchParams   
  params: {
    ID: 12345
  },

  // `paramsSerializer`       `params`       
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },

  // `data`              
  //            'PUT', 'POST',   'PATCH'
  //       `transformRequest`  ，         ：
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // -      ：FormData, File, Blob
  // - Node   ： Stream
  data: {
    firstName: 'Fred'
  },

  // `timeout`           (0        )
  //           `timeout`    ，      
  timeout: 1000,

  // `withCredentials`                
  withCredentials: false, //    

  // `adapter`          ，       
  //      promise            (   [response docs](#response-api)).
  adapter: function (config) {
    /* ... */
  },

  // `auth`        HTTP     ，     
  //        `Authorization`  ，           `headers`        `Authorization` 
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

  // `responseType`             ，    'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', //    

  // `xsrfCookieName`     xsrf token    cookie   
  xsrfCookieName: 'XSRF-TOKEN', // default

  // `xsrfHeaderName`     xsrf token     HTTP     
  xsrfHeaderName: 'X-XSRF-TOKEN', //    

  // `onUploadProgress`            
  onUploadProgress: function (progressEvent) {
    //           
  },

  // `onDownloadProgress`            
  onDownloadProgress: function (progressEvent) {
    //           
  },

  // `maxContentLength`               
  maxContentLength: 2000,

  // `validateStatus`        HTTP        resolve   reject  promise 。   `validateStatus`    `true` (      `null`   `undefined`)，promise    resolve;   ，promise    rejecte
  validateStatus: function (status) {
    return status >= 200 && status < 300; //    
  },

  // `maxRedirects`     node.js   follow         
  //      0，    follow      
  maxRedirects: 5, //    

  // `httpAgent`   `httpsAgent`     node.js          http   https          。         ：
  // `keepAlive`       
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

  // 'proxy'                
  // `auth`    HTTP             ，     
  //         `Proxy-Authorization`  ，           `header`        `Proxy-Authorization`  。
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: : {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },

  // `cancelToken`           cancel token
  // （      Cancellation       ）
  cancelToken: new CancelToken(function (cancel) {
  })
}

차단기

//        
axios.interceptors.request.use(function (config) {
    //            
    return config;
  }, function (error) {
    //          
    return Promise.reject(error);
  });

//        
axios.interceptors.response.use(function (response) {
    //          
    return response;
  }, function (error) {
    //          
    return Promise.reject(error);
  });