Vue學習筆記《一》跨域代理及axios的使用。

從去年八月份開始，斷斷續續的接觸vue ，中間由於跨域代理問題鬧過一些尷尬的問題。寫總結，促使我加深對知識點的記憶。有不對的地方請多指教。

代理跨域， 瀏覽器之間是有同源策略的，處於安全考慮不同域之間，不允許獲取數據，img script audio等標籤除外，但這些通常都是get的形式。而如果用js的ajax去遠程獲取的話就會觸發同源策略，需要後臺設置同意跨域纔可以，比較麻煩。

所以Vue裏用到了代理跨域，所謂代理跨域，就是代替前端用後端發出http請求。在vue的腳手架中，運行項目是npm run dev或者，npm run start ,其實是打開了它已經配置好的node服務器，vue的代理就是通過node來代替前端發起http請求。

在項目文件裏找到config文件夾裏的index.js  文件，修改dev下的proxyTable屬性，在target裏添加代理的目標地址。

設置好代理之後，在頁面裏引入axios，可直接使用get請求

import axios from 'axios'

axios.get('/api/apiserver/basic',{
        params:{
          pageIndex: 1,
          pageSize: 20,
          onlySustained: false,
          warnTimeStart: "2019-01-01",
          warnTimeEnd: "2019-05-06",

        }
      })
        .then(res=>{
          console.log(res)
          console.log(res.data)
           this.AllInfo=res.data
        })
        .catch(err=>{
          console.log(err)
        })

POST請求：

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(response=> {
    console.log(response);
  })
  .catch(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) {
    // 兩個請求現在都執行完成
  }));

請求的一些配置(常用的)：只有url是必須的，如果沒有指定method，請求將默認使用get方法。

url："/getuser" 用於請求的服務器URL；

method:“get/post” 默認是get ,創建請求時使用的方法。

transform Request 允許在服務器發送前，修改請求數據
只能用在put post patch   這幾個請求方法。後面數組中的函數必須返回一個字符串，或者ArrayBuffer或者Stream

transformRequest:[function(data){
對data 進行任意的轉換處理；      
return data}]；

  
transformResponse: 在傳遞給then,catch前 允許修改響應數據
  
headers是即將被髮送的自定義請求頭

params 是即將與請求一起發送的url參數。

paramsSerializer 是個負責params 序列化的函數。
  
data 是作爲請求主體被髮送的數據

只適用於這些請求方法put post patch 

在沒有設置transformRequest時，必須是以下類型之一。

string,plain object ,ArrayBuffer,ArrayBufferView,urlSearchParams

瀏覽器專屬： formData.file,Blob

node專屬：Stream
  
timeout 指定請求超時的毫秒數（0表示無超時間） 如果請求花費了超過timeout的時間，請求將被中斷。
  
withCredentials:false 表示跨域請求是否需要使用憑證。adapter:function(config){}:允許自定義處理請求，
  
  請求攔截，
 

 axios.interceptors.request.use(config=>{
  //在發送請求之前做的事；
  return config;},err=>{
  //請求錯誤的處理
  return.params.reject(err);});

  
  響應攔截，返回數據處理
 

 axios.interceptors.response.use(response=>{
  //對返回數據處理 如發送請求時添加加載動畫，當數據返回時 關閉加載動畫。
  
  return response};err=>{
  //對返回數據錯誤時 處理。也許要關閉加載動畫，並提示加載失敗。
  return Promise.reject(err);});