$ npm i axios

$ bower instal axios

<!--國內(nèi)bootCDN-->
<script src="https://cdn.bootcss.com/axios/0.16.0/axios.min.js"></script>

//發(fā)起一個(gè)user請(qǐng)求，參數(shù)為給定的ID
axios.get('/user?ID=1234')
.then(function(respone){
  console.log(response);
})
.catch(function(error){
  console.log(error);
});

//上面的請(qǐng)求也可選擇下面的方式來寫
axios.get('/user',{
  params:{
    ID:12345
  }
})
  .then(function(response){
    console.log(response);
  })
  .catch(function(error){
    console.log(error)
  });

axios.post('/user',{
  firstName:'friend',
  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([getUerAccount(),getUserPermissions()])
  .then(axios.spread(function(acc,pers){
    //兩個(gè)請(qǐng)求現(xiàn)在都完成
  }));

//發(fā)起 POST請(qǐng)求

axios({
  method:'post',//方法
  url:'/user/12345',//地址
  data:{//參數(shù)
    firstName:'Fred',
    lastName:'Flintstone'
  }
});

//通過請(qǐng)求獲取遠(yuǎn)程圖片
axios({
  method:'get',
  url:'http://bit.ly/2mTM3Ny',
  responseType:'stream'
})
  .then(function(response){
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  })

//發(fā)起一個(gè)GET請(qǐng)求
axios('/user/12345/);

var instance = axios.create({
  baseURL:'http://some-domain.com/api/',
  timeout:1000,
  headers:{'X-Custom-Header':'foobar'}
});

{
  //`url`是服務(wù)器鏈接，用來請(qǐng)求
  url:'/user',

  //`method`是發(fā)起請(qǐng)求時(shí)的請(qǐng)求方法
  method:`get`,

  //`baseURL`如果`url`不是絕對(duì)地址，那么將會(huì)加在其前面。
  //當(dāng)axios使用相對(duì)地址時(shí)這個(gè)設(shè)置非常方便
  //在其實(shí)例中的方法
  baseURL:'http://some-domain.com/api/',

  //`transformRequest`允許請(qǐng)求的數(shù)據(jù)在傳到服務(wù)器之前進(jìn)行轉(zhuǎn)化。
  //這個(gè)只適用于`PUT`,`GET`,`PATCH`方法。
  //數(shù)組中的最后一個(gè)函數(shù)必須返回一個(gè)字符串或者一個(gè)`ArrayBuffer`,或者`Stream`,`Buffer`實(shí)例,`ArrayBuffer`,`FormData`
  transformRequest:[function(data){
    //依自己的需求對(duì)請(qǐng)求數(shù)據(jù)進(jìn)行處理
    return data;
  }],

  //`transformResponse`允許返回的數(shù)據(jù)傳入then/catch之前進(jìn)行處理
  transformResponse:[function(data){
    //依需要對(duì)數(shù)據(jù)進(jìn)行處理
    return data;
  }],

  //`headers`是自定義的要被發(fā)送的頭信息
  headers:{'X-Requested-with':'XMLHttpRequest'},

  //`params`是請(qǐng)求連接中的請(qǐng)求參數(shù)，必須是一個(gè)純對(duì)象，或者URLSearchParams對(duì)象
  params:{
    ID:12345
  },

  //`paramsSerializer`是一個(gè)可選的函數(shù)，是用來序列化參數(shù)
  //例如：（https://ww.npmjs.com/package/qs,http://api.jquery.com/jquery.param/)
  paramsSerializer: function(params){
    return Qs.stringify(params,{arrayFormat:'brackets'})
  },

  //`data`是請(qǐng)求提需要設(shè)置的數(shù)據(jù)
  //只適用于應(yīng)用的'PUT','POST','PATCH'，請(qǐng)求方法
  //當(dāng)沒有設(shè)置`transformRequest`時(shí)，必須是以下其中之一的類型（不可重復(fù)？）：
  //-string,plain object,ArrayBuffer,ArrayBufferView,URLSearchParams
  //-僅瀏覽器：FormData,File,Blob
  //-僅Node：Stream
  data:{
    firstName:'fred'
  },
  //`timeout`定義請(qǐng)求的時(shí)間，單位是毫秒。
  //如果請(qǐng)求的時(shí)間超過這個(gè)設(shè)定時(shí)間，請(qǐng)求將會(huì)停止。
  timeout:1000,

  //`withCredentials`表明是否跨網(wǎng)站訪問協(xié)議，
  //應(yīng)該使用證書
  withCredentials:false //默認(rèn)值

  //`adapter`適配器，允許自定義處理請(qǐng)求，這會(huì)使測試更簡單。
  //返回一個(gè)promise，并且提供驗(yàn)證返回（查看[response docs](#response-api)）
  adapter:function(config){
    /*...*/
  },

  //`auth`表明HTTP基礎(chǔ)的認(rèn)證應(yīng)該被使用，并且提供證書。
  //這個(gè)會(huì)設(shè)置一個(gè)`authorization` 頭（header），并且覆蓋你在header設(shè)置的Authorization頭信息。
  auth:{
    username:'janedoe',
    password:'s00pers3cret'
  },

  //`responsetype`表明服務(wù)器返回的數(shù)據(jù)類型，這些類型的設(shè)置應(yīng)該是
  //'arraybuffer','blob','document','json','text',stream'
  responsetype:'json',

  //`xsrfHeaderName` 是http頭（header）的名字，并且該頭攜帶xsrf的值
  xrsfHeadername:'X-XSRF-TOKEN'，//默認(rèn)值

  //`onUploadProgress`允許處理上傳過程的事件
  onUploadProgress: function(progressEvent){
    //本地過程事件發(fā)生時(shí)想做的事
  },

  //`onDownloadProgress`允許處理下載過程的事件
  onDownloadProgress: function(progressEvent){
    //下載過程中想做的事
  },

  //`maxContentLength` 定義http返回內(nèi)容的最大容量
  maxContentLength: 2000,

  //`validateStatus` 定義promise的resolve和reject。
  //http返回狀態(tài)碼，如果`validateStatus`返回true（或者設(shè)置成null/undefined），promise將會(huì)接受；其他的promise將會(huì)拒絕。
  validateStatus: function(status){
    return status >= 200 && stauts < 300;//默認(rèn)
  },

  //`httpAgent` 和 `httpsAgent`當(dāng)產(chǎn)生一個(gè)http或者h(yuǎn)ttps請(qǐng)求時(shí)分別定義一個(gè)自定義的代理，在nodejs中。
  //這個(gè)允許設(shè)置一些選選個(gè)，像是`keepAlive`--這個(gè)在默認(rèn)中是沒有開啟的。
  httpAgent: new http.Agent({keepAlive:treu}),
  httpsAgent: new https.Agent({keepAlive:true}),

  //`proxy`定義服務(wù)器的主機(jī)名字和端口號(hào)。
  //`auth`表明HTTP基本認(rèn)證應(yīng)該跟`proxy`相連接，并且提供證書。
  //這個(gè)將設(shè)置一個(gè)'Proxy-Authorization'頭(header)，覆蓋原先自定義的。
  proxy:{
    host:127.0.0.1,
    port:9000,
    auth:{
      username:'cdd',
      password:'123456'
    }
  },

  //`cancelTaken` 定義一個(gè)取消，能夠用來取消請(qǐng)求
  //（查看 下面的Cancellation 的詳細(xì)部分）
  cancelToken: new CancelToken(function(cancel){
  })
}

{
  //`data`是服務(wù)器的提供的回復(fù)（相對(duì)于請(qǐng)求）
  data{},

  //`status`是服務(wù)器返回的http狀態(tài)碼
  status:200,

  //`statusText`是服務(wù)器返回的http狀態(tài)信息
  statusText: 'ok',

  //`headers`是服務(wù)器返回中攜帶的headers
  headers:{},

  //`config`是對(duì)axios進(jìn)行的設(shè)置，目的是為了請(qǐng)求（request）
  config:{}
}

axios.get('/user/12345')
  .then(function(response){
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

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';

//當(dāng)創(chuàng)建一個(gè)實(shí)例時(shí)進(jìn)行默認(rèn)設(shè)置
var instance = axios.create({
  baseURL:'https://api.example.com'
});

//在實(shí)例創(chuàng)建之后改變默認(rèn)值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

//使用默認(rèn)庫的設(shè)置創(chuàng)建一個(gè)實(shí)例，
//這個(gè)實(shí)例中，使用的是默認(rèn)庫的timeout設(shè)置，默認(rèn)值是0。
var instance = axios.create();

//覆蓋默認(rèn)庫中timeout的默認(rèn)值
//此時(shí)，所有的請(qǐng)求的timeout時(shí)間是2.5秒
instance.defaults.timeout = 2500;

//覆蓋該次請(qǐng)求中timeout的值，這個(gè)值設(shè)置的時(shí)間更長一些
instance.get('/longRequest',{
  timeout:5000
});

//添加一個(gè)請(qǐng)求攔截器
axios.interceptors.request.use(function(config){
  //在請(qǐng)求發(fā)送之前做一些事
  return config;
},function(error){
  //當(dāng)出現(xiàn)請(qǐng)求錯(cuò)誤是做一些事
  return Promise.reject(error);
});

//添加一個(gè)返回?cái)r截器
axios.interceptors.response.use(function(response){
  //對(duì)返回的數(shù)據(jù)進(jìn)行一些處理
  return response;
},function(error){
  //對(duì)返回的錯(cuò)誤進(jìn)行一些處理
  return Promise.reject(error);
});

var myInterceptor = axios.interceptors.request.use(function(){/*...*/});
axios.interceptors.rquest.eject(myInterceptor);

var instance = axios.create();
instance.interceptors.request.use(function(){/*...*/});

axios.get('user/12345')
  .catch(function(error){
    if(error.response){
      //存在請(qǐng)求，但是服務(wù)器的返回一個(gè)狀態(tài)碼
      //他們都在2xx之外
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    }else{
      //一些錯(cuò)誤是在設(shè)置請(qǐng)求時(shí)觸發(fā)的
      console.log('Error',error.message);
    }
    console.log(error.config);
  });

axios.get('user/12345',{
  validateStatus:function(status){
    return status < 500;//當(dāng)返回碼小于等于500時(shí)視為錯(cuò)誤
  }
});

var CancelToken = axios.CancelToken;
var source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken:source.toke
}).catch(function(thrown){
  if(axiso.isCancel(thrown)){
    console.log('Rquest canceled', thrown.message);
  }else{
    //handle error
  }
});

//取消請(qǐng)求(信息參數(shù)設(shè)可設(shè)置的)
source.cancel("操作被用戶取消");

var CancelToken = axios.CancelToken;
var cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c){
    //這個(gè)executor 函數(shù)接受一個(gè)cancel function作為參數(shù)
    cancel = c;
  })
});

//取消請(qǐng)求
cancel();

var params = new URLSearchParams();
params.append('param1','value1');
params.append('param2','value2');
axios.post('/foo',params);

var qs = require('qs');
axios.post('/foo', qs.stringify({'bar':123}));

var querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({foo:'bar'}));

import axios from 'axios'
axios.get('/user?ID=12345')