axios配合vue+webpack使用

　　1、安裝引用：

　　　　cnpm install axios --save-dev

　　2、在組件中引入：

　　　　import axios from 'axios';

　　3、使用示例：

　　　　執行GET請求：

// 為給定 ID 的 user 創建請求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 可選地，上面的請求可以這樣做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

 　　　　執行POST請求：

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) {
    // 兩個請求現在都執行完成
  }));

 

　　　　　

 

請求方法的別名：　

　　所欲支持的請求方法都提供了別名：

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]])

 

 

axios的API:

　　通過配置（config）來發送請求：

　　1.axios(config)

//發送一個`POST`請求
axios({
    method:"POST",
    url:'/user/12345',
    data:{
        firstName:"Fred",
        lastName:"Flintstone"
    }
});

 

 

　　2.axios(url,[,config])

//發送一個`GET`請求（默認的請求方式）
axios('/user/12345');

 

　　

請求的配置（request config）

　　以下配置選項，只有url選項是必須的，如果method選項未定義，那么默認GET

{
  //`url`是請求的服務器地址
  url:'/user',
  //`method`是請求資源的方式
  method:'get'//default
  //如果`url`不是絕對地址，那么`baseURL`將會加到`url`的前面
  //當`url`是相對地址的時候，設置`baseURL`會非常的方便
  baseURL:'https://some-domain.com/api/',
  //`transformRequest`選項允許我們在請求發送到服務器之前對請求的數據做出一些改動
  //該選項只適用於以下請求方式：`put/post/patch`
  //數組里面的最后一個函數必須返回一個字符串、-一個`ArrayBuffer`或者`Stream`
  transformRequest:[function(data){
    //在這里根據自己的需求改變數據
    return data;
  }],
  //`transformResponse`選項允許我們在數據傳送到`then/catch`方法之前對數據進行改動
  transformResponse:[function(data){
    //在這里根據自己的需求改變數據
    return data;
  }],
  //`headers`選項是需要被發送的自定義請求頭信息
  headers: {'X-Requested-With':'XMLHttpRequest'},
  //`params`選項是要隨請求一起發送的請求參數----一般鏈接在URL后面
  //他的類型必須是一個純對象或者是URLSearchParams對象
  params: {
    ID:12345
  },
  //`paramsSerializer`是一個可選的函數，起作用是讓參數（params）序列化
  //例如(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`選項時dada必須是以下幾種類型之一
  //string/plain/object/ArrayBuffer/ArrayBufferView/URLSearchParams
  //僅僅瀏覽器：FormData/File/Bold
  //僅node:Stream
  data {
    firstName:"Fred"
  },
  //`timeout`選項定義了請求發出的延遲毫秒數
  //如果請求花費的時間超過延遲的時間，那么請求會被終止

  timeout:1000,
  //`withCredentails`選項表明了是否是跨域請求
  
  withCredentials:false,//default
  //`adapter`適配器選項允許自定義處理請求，這會使得測試變得方便
  //返回一個promise,並提供驗證返回
  adapter: function(config){
    /*..........*/
  },
  //`auth`表明HTTP基礎的認證應該被使用，並提供證書
  //這會設置一個authorization頭（header）,並覆蓋你在header設置的Authorization頭信息
  auth: {
    username:"zhangsan",
    password: "s00sdkf"
  },
  //返回數據的格式
  //其可選項是arraybuffer,blob,document,json,text,stream
  responseType:'json',//default
  //
  xsrfCookieName: 'XSRF-TOKEN',//default
  xsrfHeaderName:'X-XSRF-TOKEN',//default
  //`onUploadProgress`上傳進度事件
  onUploadProgress:function(progressEvent){
    //下載進度的事件
onDownloadProgress:function(progressEvent){
}
  },
  //相應內容的最大值
  maxContentLength:2000,
  //`validateStatus`定義了是否根據http相應狀態碼，來resolve或者reject promise
  //如果`validateStatus`返回true(或者設置為`null`或者`undefined`),那么promise的狀態將會是resolved,否則其狀態就是rejected
  validateStatus:function(status){
    return status >= 200 && status <300;//default
  },
  //`maxRedirects`定義了在nodejs中重定向的最大數量
  maxRedirects: 5,//default
  //`httpAgent/httpsAgent`定義了當發送http/https請求要用到的自定義代理
  //keeyAlive在選項中沒有被默認激活
  httpAgent: new http.Agent({keeyAlive:true}),
  httpsAgent: new https.Agent({keeyAlive:true}),
  //proxy定義了主機名字和端口號，
  //`auth`表明http基本認證應該與proxy代理鏈接，並提供證書
  //這將會設置一個`Proxy-Authorization` header,並且會覆蓋掉已經存在的`Proxy-Authorization`  header
  proxy: {
    host:'127.0.0.1',
    port: 9000,
    auth: {
      username:'skda',
      password:'radsd'
    }
  },
  //`cancelToken`定義了一個用於取消請求的cancel token
  //詳見cancelation部分
  cancelToken: new cancelToken(function(cancel){

  })
}

 

 

作者：FunnySeeker
鏈接：https://www.jianshu.com/p/df464b26ae58
來源：簡書 著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。