一、框架搭建 --資料請求以及代理

發起請求方法使用axiosv0.26.0版本外掛庫來解決api介面呼叫

因為這個請求庫是使用了Promise實現的一個XHR封裝、它可以實現請求和響應（403）攔截,同時可以實現通用配置

1.安裝cnpm i -S axios

vue腳手架的webpack配置：

module.export={
   lintOnSave:false,
   pages:{
    index:{
       template:'./public.index.html',
       entry:'./src/index.js'
}   
},
    devServer:{
    open:
 
true,
    port:16666,
   //實現資料請求代理配置
    proxy:{
   //指定需要代理的請求，不是每一個請求都要代理，所以需要一個代理請求地址
    '/apis':{
    //代理過後的地址：http://localhost:16666/apis/user/app/code
    //代理目標=>http://www.shuiyue.info:12600/apis/user/app/code
   target:'http://www.shuiyue.info:12600'，
   //需要把多餘的/apis從地址中匹配掉=>http://www.shuiyue.info:12600/user/app/code
 

   pathRewrite:{
  //重寫地址的規則
  '/apis':''
}
}
}
}
}

//這裡寫代理伺服器的配置以及埠

2.請求介面封裝：

在系統中，需要使用async + await來實現同步程式碼，但是同步只支援Promise.resolve，基礎配置應該是一樣的，所以需要一次性配置

然後在使用的時候，就不需要來寫這些通用配置

//引入axios
import axios from 'axios'

//封裝一個ajax請求方法
function ajaxFunc(req){
    return new Promise(resolve=>{
    //可以把動態資料 url 、method、params、data抽取出來
 

   axios.request({
    //設定請求地址
   url:req.url,
   method:req.method || 'GET'，
   //是請求的基礎地址
   //單頁面元件請求的地址：
   //baseURL:'http://www.shuiyue.info:12600',
   //baseURL:'/apis', //這個請求寫好代理伺服器 就直接應欄位名,http:localhost:16666/apis/user/app/code
   //請求頭
  headers:{token:'test token'},
  //超時配置 -- 設定請求的最大時長
  timeout:5000,
  //params引數配置 - - 它的引數會自動拼接到url地址上
  params:req.params || {},
  //data引數 - - 不能在get請求中使用，它是請求體引數
  data:req.data || {}
//}).then(data=>{
  //請求返回的是一個response物件，希望得到資料
  //console.log(data.data)
//})
  }).then(({data})=>{
  //可以對response物件進行結構賦值取值
  // 返回資料
    resolve(data)
}).catch(e=>{
  console.log('---請求失敗')
  resolve(e)
})
})
})
}

export default ajaxFunc

在另外檔案可以直接引入封裝後的axios請求方法

//對所有的登入介面進行封裝，只接收引數，然後返回請求結果，所有的介面都應該單獨匯出
//單獨匯出一個獲取驗證碼的介面
export function getVdtCodeApi(phone){
  //需要返回一個Promise回去
  return Ajax({
   url:'/user/app/code',
   //params接收的是一個物件
  //params :{phone:phone}
   params:{phone}
})
}

//這個檔案上只需要寫url介面地址後面的然後需要傳參這些直接可以提交
//這樣對簡潔配置檔案引數，會方便有助於開發和維護性

在頁面元件呼叫api請求介面：

<script>
//首先要引入單個介面
import {getVdtCodeApi} from '../../apis/loginApi'

export defalut {
 methods:{
   loginEvt(){
  //快取使用者登入標識，然後再進行頁面跳轉
  //因為是讀取vuex，所以必須使用vuex快取
  this.$store.commit('common/setToken','token')
  this.$router.push('/home')
},
  //獲取驗證碼的方法
  async getVdtCode(){
   //要發起ajax請求--需要使用引入axios庫
  // 首先獲取url地址 傳送get請求
  //get(url:string,config?:AxiosRequestConfig):Promise
   //url地址得到後就要去Axios Request Config axios的請求配置物件

  //使用同步程式碼 ajaxFunc 這個方法只能是一個只有resolve的Promise
    let result=await this.ajaxFunc({url:'/user/app/code',params:{phone:'13455567777'}})
//這個介面可能其他頁面也會使用，所以應該把這個url地址也定義出去 
  let result=await getVdtCodeApi('1369999999')
  console.log(result)
}
}
 
}


</script>