前言
之前寫了一個Vue.js的axios封裝（點擊跳轉），這次是uni-app，uni-app是基於vue.js框架的，我覺得是很好用的一個框架，而且一套代碼編譯那么多平台，非常節省成本，當然，有好處肯定也有不好的地方，那就是坑。踩坑的地方很多（沒踩過坑肯定是沒有深入使用uni-app），如果有坑自己嘗試了而沒有辦法處理，建議添加官方QQ群或者到官方論壇提問或者搜索。這次的封裝跟axios沒多大區別，也是異步請求,但是這個是直接把uni-app的自帶API請求uni.request封裝。
封裝uni.request
在根目錄下建一個api文件夾，起一個request.js，放入下面代碼
const request = (config) => {
// 處理 apiUrl
config.url = '127.0.0.1/api' + config.url;
if(!config.data){
config.data = {};
}
console.log(JSON.stringify(config.data));
let promise = new Promise(function(resolve, reject) {
uni.request(config).then(responses => {
// 異常
if (responses[0]) {
reject({message : "網絡超時"});
} else {
let response = responses[1].data; // 如果返回的結果是data.data的，嫌麻煩可以用這個，return res,這樣只返回一個data
resolve(response);
}
}).catch(error => {
reject(error);
})
})
return promise;
};
export default request;
管理api
接下來繼續在api文件夾下面創建一個login.js文件（如果api接口分類不需要分開的話就創建index.js，全部放一塊，然后引入js，定義一個api，使用就以api.pwdlogin().then(res => {})方式）
PS：這里跟axios封裝方式不一樣，如果一個模塊有多個請求（比如登錄有密碼登錄，手機驗證碼登錄等等），可以用以下方式，方便管理。
import request from '@/api/request'; // 引入封裝好的request
// 密碼登錄
function pwdLogin (data) {
return request({
method: "POST", // 請求方式
url: 'login/pwd', // 請求url
data: data // 參數
})
}
// 手機登錄
function phoneLogin (data) {
return request({
method: "POST", // 請求方式
url: 'login/phone', // 請求url
data: data // 參數
})
}
export default{
pwdLogin,
phoneLogin
}
使用api
import login from '@/api/login.js'; // 引入api
export default {
data() {
return {
phone: '', // 手機號碼
password: '', // 密碼
code: '', // 手機驗證碼
isPwdLogin: true // 是否使用密碼登錄
}
},
onShow() {
this.showInit();
},
methods: {
// 初始化
async showInit() {},
// 登錄
handleToLogin() {
if (isPwdLogin) { // 使用密碼登錄
let pwdParams = {
phone: this.phone,
password: this.password
}
login.pwdLogin(pwdParams).then(res => {
if (res.code == 200) {
uni.showToast({
title: "登錄成功",
icon: 'success'
})
}
}).catch(err => {
uni.showToast({
title: err.msg,
icon: 'none'
})
});
} else { // 使用手機驗證碼登錄
let phoneParams = {
phone: this.phone,
code: this.code
}
login.phoneLogin(phoneParams).then(res => {
if (res.code === 200) {
uni.showToast({
title: "登錄成功",
icon: 'success'
});
}
}).catch(err => {
uni.showToast({
title: err.msg,
icon: 'none'
})
});
}
}
}
}
以上就是這篇uni.request封裝的所有內容了，看到這里的伙伴們如果有不明白的地方請留言哦，如果寫的不好也可以留言吐槽！！！
總結
跟axios封裝稍微有一點點變化，但是都很明顯的，這個封裝個人覺得是非常非常好用，然后就是uni-app的uni.request請求問題，這里要說明一下，如果遇到異步問題，請使用下面的方法：
import products from '@/api/products.js'
export default {
data() {
return {
productsList: []
}
},
onLoad() {
this.showInit();
},
methods: {
// 初始化
async showInit() {
await this.getProductsList();
},
// 獲取產品列表
getProductsList() {
products.list().then(res => {
if (res.code == 200) {
this.productsList = res.data;
}
}).catch(err => {
uni.showToast({
title: err.msg,
icon: 'none'
})
});
}
}
}
這里用到了async + await，如果不明白這兩個語法的意思和用處，請看 阮一峰的ES6教程，這里就不明說了。