1 為什么要將api封裝起來?
- 方便對專案的api進行管理，可以快速的找到對應api的位置與對應的內容，方便進行修改等操作，
2 步驟
2.1 創建api檔案夾,對api進行封裝
- 在該檔案夾內創建api相對于的js檔案，
- 通promise的方式對api進行封裝
- 注意：由于利用了對axios二次封裝的部分，對于axios的封裝詳情看axios的二次封裝
import request from '@/utils/request.js';
// 匯入 request
/**
* 獲取用戶資訊 api
* @return {Promise} 回傳一個Promise
* @description 獲取用戶資訊api 成功回傳用戶資訊，失敗回傳失敗結果
*/
export const GetUserInfo = ()=>{
return new Promise((resolve,reject)=>{
request.get("/member/ajax_login.php")
.then(res=>resolve(res))
.catch(err=>reject(err))
})
}
/**
* 退出登錄api
* @return {Promise} 回傳一個Promise 成功 {status:1,msg:'成功'} ；失敗 {status:0,'退出失敗'}
* */
export const Exit=()=>{
return new Promise((resolve,reject)=>{
request.postURL("/member/index_login.php",{dopost:'exit'})
.then(res=>resolve(res))
.catch(err=>reject(err))
})
}
2.2 如何在組件中使用封裝的api
- 匯入封裝的api ：import {GetUserInfo,Exit} from ‘…/…/api/index.js’
- 在methods中呼叫api，獲取資料
Exit({dopost:'exit'})
.then(res=>{
if(res.data.status){ //如果status為1
sessionStorage.removeItem("token") //洗掉token
this.userInfo = {}; //清空用戶資訊
this.$notify({ type: 'success', message: '退出成功' });
// 提示用戶退出成功
}
})
.catch(err=>console.log(err))
GetUserInfo()
.then(res=>{
if(res.data){
this.userInfo = res.data;
// 獲取到的用戶資訊賦值給 userInfo
}
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/76943.html
標籤：AI