簡介
在uniapp專案中，封裝request請求，來實作代碼的重用性，
~
uni.request發包：
常規操作：
uni.request({
url:"http://www.xxxxxx.com/xxx.php",
data:{
username:username,
passwd:passwd
},
header:{
'content-type': 'application/x-www-form-urlencoded'
},
method:"POST",
fail: (err) => {
console.log(err.data);
},
success: (e) => {
console.log(e.data)
}）
post傳參，書寫起來很龐大，建議封裝，封裝的話不好對回傳的資料判斷和操作，使用ES6中定義好的建構式Promise來進行封裝，
Promise設定好了回傳的各種引數，
操作
定義檔案 “./common/js/request.js”
內容如下：
const baseUrl = "http://www.xxxxxx.com"; //在這里輸入提供服務的服務器網址
const request = (url='',data={})=>
{
uni.showLoading({
title:'請稍候',
});
setTimeout(function () { //自動停止加載
uni.hideLoading();
}, 2000);
return new Promise((resolve,reject)=>{ //回傳一個promise物件
uni.request({
url:baseUrl+url, //加上設定的網址
method:"POST",
data:data,
header:{
'content-type': 'application/x-www-form-urlencoded' //防止編碼問題
},
success: (res) => {
uni.hideLoading();
if(res.statusCode==200){
resolve(res) //成功回傳
}
else{
resolve({
data:"請求失敗，請檢查網路連接", //回傳提示的json資料
statusCode: 404
})
}
},
fail: (err) => {
reject(err) //失敗回傳
uni.hideLoading();
}
})
});
}
export default request //暴露出來
resolve和reject回傳不同情況下的資料，在resolve回傳成功的資料中，判斷其中的
statusCode是否為200來判斷是否連接正常，
呼叫
在main.js中掛載到全域：
import request from "common/js/request.js"
Vue.prototype.$request=request
在主頁面，使用this.$request來進行發包：
在method里定義一個函式，test()，通過點擊按鈕呼叫
test(){
this.$request('/xxxx.php', {
test:'xxxx'
}).then((res) =>{
console.log(res.data)
})
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/304112.html
標籤：其他
上一篇：js判斷哪行資料為空