一、為什麼使用axios？(響應攔截，請求，非同步封裝配置)

它是基於xhr的請求封裝的引進優化的一個請求庫，

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

//在apis資料夾寫建立封裝的Ajax檔案
//引入axios
import axios from 'axios'

//可以實現把固定的引數進行一個封裝，然後再實現請求攔截
//created方法接收一個請求配置物件，返回一個例項
const Axios =axios.create({
   timeout:5000,
   baseURL:'/apis',
})

//可以使用例項的攔截屬性來進行請求攔截 -- 發起請求之前，請求響應之後
 

//請求之前做一個攔截
//函式會把請求引數全部傳參進來，我們可以對這個引數做處理
//請求前的攔截，需要返回資料，才會繼續發出請求
Axios.inteceptors.request.use(function(config){
  console.log(config)
//如果token不存在則直接丟擲一個錯誤，然後結束請求，不然發不出請求
//模擬有token資料
 let token='aaaa'
 let otherPath =['/user/app/code','/user/app/login']
//如果請求地址包含在排除地址中，那麼這個請求就不要攔截
if(otherPath.includes(config.url)){
  
 
return config
}else{
  //如果需要攔截，則需要對token進行校驗
//不存在，直接返回一個錯誤資訊
 if(!token){
  return Promise.reject({code:400,message:'當前使用者沒有登入，所以不能發出非同步請求'})
}else{
  //可以對config資料進行加工，新增上token資料
  config.headers.token=token
  //直接發出請求
  return config
}
}
})
//響應之後 -- 需要使用use方法來註冊一個鉤子函式，用於axios在完成請求之後來執行業務處理方法
//use 需要傳遞一個函式，這通用業務的一個攔截處理
 

個函式要求返回一個Promise或則是一個物件(Promise | any)
//函式會有一個響應物件形參，然後可以通過對形參的data物件處理，實現一個攔截處理
Axios.interceptors.response.use(function(response){
  //判斷後端返回的狀態碼是否是403，如果是403，直接丟擲一個異常，中斷請求，然後提示使用者token失效，需要重新登入
if(response.data.code === 403){
  //throw new TypeError('使用者的token錯誤或已失效，需要使用者重新登入獲取新的token')

}else{
  //正常的業務直接返回物件
  return response
}
})

//封裝一個ajax請求方法
function ajaxFunc(req){
 //如果url地址沒有傳遞，直接報錯 --JS是主執行緒執行應用，所以可以使用異常丟擲中斷當前的現程
if(!req.url){
   throw new SyntaxError('請求的url引數是必傳的')
}
 return new Promise(resolve=>{
    //把動態資料url,method,params,data抽取出來
   //應該用封裝後的一個請求例項物件
  //axios.request({
    //設定請求地址
     url:req.url,
    method:req.method || 'GET',
   //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 defalut ajaxFunc

封裝一個公共axios請求，是為方便其他的介面來請求呼叫

//對所有的登入介面進行封裝，只接收引數，然後返回請求結果，所有的介面都應該單獨匯出

//引入封裝後的axios請求方法
import Ajax from './Ajax'

//單獨匯出一個獲取驗證碼的介面
export function getVdtCodeApi(phone){
  //需要返回一個Promise回去
  return Ajax({
  url:'/user/app/code',
  //params接收的是一個物件
  //params:{phone:phone}
   params:{phone}
})
}
//如何使用一個動態介面：/user/:id 文件形式，/user/{id} swagger形式
//在使用的時候，需要把:id或則是{id} 替換為需要傳遞的引數值
export function getUserInfoApi(id){
  return Ajax({
   //url:'/user/'+id
  url:`/user/{$id}`
})
}

在元件頁面呼叫介面資料：（首先在js裡引入然後在methods裡使用async/awiat同步操作進行資料獲取）

<script>
  import {getUserInfoApi,getVdtCodeApi} from '../../apis/loginApi'
  export defalut{
   data(){
    return{
   value:''
}
   }
methods:{
    //獲取驗證碼請求介面的方法
 async getVdtCode(){
  let result = awiat getVdtCodeApi('18982739')
  console.log(result)
}
}
}

</script>