一、axios的封裝
在vue專案中，和后臺互動獲取資料這塊，我們通常使用的是axios庫，它是基于promise的http庫，可運行在瀏覽器端和node.js中，他有很多優秀的特性，例如攔截請求和回應、取消請求、轉換json、客戶端防御XSRF等，
在一個專案中我們如果要使用很多介面的話，總不能在每個頁面都寫滿了.get()或者.post()吧？所以我們就要自己手動封裝一個全域的Axios網路模塊，這樣的話就既方便也會使代碼量不那么冗余，
安裝
> npm install axios //這個就是安裝axios的命令
首先我們要現在專案中安裝Axios組件，這一步是一定的，
下載好了以后，就在專案的src檔案里再新建兩個目錄，一個是http，一個是api，http目錄是用來封裝Axios的，api目錄是用來統一來管理我們的介面的，
引入
第一步，先要在http.js里面引入axios
import axios from 'axios'
環境的切換
在我們開發專案的時候會有多種環境，就比如開發環境、測驗環境、生產環境，使用axios.defaults.baseURL可以設定axios的默認請求地址，
//在開發環境中的測驗 development
if(process.env.NODE_ENV == 'development') {
axios.defaults.baseURL = 'http://120.53.31.103:84/'
}
//在生產環境中的測驗 production
if(process.env.NODE_ENV == 'production') {
axios.defaults.baseURL = 'https://wap.365msmk.com/'
}
//還有一種環境 debug
設定回應超時時間
通過axios.defaults.timeout設定默認的請求超時時間，如果超出了回應時間，就會告知用戶當前請求超時，請重繪等等
//回應超時的時間
axios.defaults.timeout = 5000;
設定介面請求攔截
//介面請求攔截
axios.interceptors.request.use(
config => {
config.headers = { DeviceType : 'H5' } //設定回應頭部
return config
}
)
使用promise回傳axios請求的結果
post :
export function get(url,params){
return new Promise((resolve,reject) => {
axios.get(url,{
params : params
}).then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})
}
get :
export function post(url,params){
return new Promise((resolve,reject) => {
axios.post(url,params)
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err.data)
})
})
}
這個時候，http.js里面的就寫好了，下面就要去api.js去獲取api介面了，
現在是api.js中的內容
首先是要在api.js中引入剛剛封裝好的axios
import {get,post} from '../http/http.js'
//get post 同時都要引入
然后就可以根據介面檔案來進行資料的獲取啦
//封裝介面的方法
export function getAppIndex() {
return get('api/app/recommend/appIndex')
}
export function getBanner() {
return get('api/app/banner')
}
export function getTel() {
return post('api/app/smsCode',{
//這里用的是params傳參，直接寫{}就可，不用再宣告params啦
mobile : 18567391972,
sms_type : 'login'
})
}
再再然后，就可以去vue頁面通過生命周期來獲取資料啦，
再再再注意，這里不一定一定要使用async函式，這只是其中一種方法啦
async mounted() {
// 明星講師、精品課程等等
let res = await getAppIndex();
//添加到陣列
this.startList = res.data.data.list
// 輪播圖串列
var banner = await getBanner();
// console.log('輪播圖'+ banner)
if (banner.data.code == 200) {
this.bannerList = banner.data.data
}
// 手機驗證碼介面
let Tel = await getTel();
// console.log('手機驗證碼'+ Tel)
//
},
謝謝大家謝謝大家，希望這篇可以幫上大家的忙
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/163550.html
標籤：其他