uniapp中uni.request(OBJECT)接口請求封裝實例代碼
更新時間：2022年12月09日 14:11:09 作者：sunly_
在開發(fā)的時候經常會用到前端請求后端接口,每次的請求都會出現(xiàn)地址不一樣,參數(shù)不一樣,方式不一樣等等情況,下面這篇文章主要給大家介紹了關于uniapp中uni.request(OBJECT)接口請求封裝的相關資料,需要的朋友可以參考下
封裝request.js
import { baseURL} from './common.js' //接口域名引入
// 攔截
let requestStart = function(params) {
// 如果需要在接口參數(shù)中加入token,使用下邊這段代碼
let access_token = uni.getStorageSync('access_token') || '';
if (params.__proto__.constructor.name == "Object") {
access_token && (params.access_token = access_token);
params = params;
} else if (params.__proto__.constructor.name == "FormData") {
access_token && (params.append("access_token", access_token));
}
// 如果需要顯示加載動畫
// uni.showNavigationBarLoading(); // 在當前頁面顯示導航條加載動畫。
// uni.showLoading({
// title: '加載中',
// mask: true
// });
return params;
}
// 對于 GET 方法，會將數(shù)據轉換為 query string。例如 { name: 'name', age: 18 } 轉換后的結果是 name=name&age=18。
// 對于 POST 方法且 header['content-type'] 為 application/json 的數(shù)據，會進行 JSON 序列化。
// 對于 POST 方法且 header['content-type'] 為 application/x-www-form-urlencoded 的數(shù)據，會將數(shù)據轉換為 query string。
export function get(url, params = {}) {
return new Promise((resolve, reject) => {
if (requestStart(params)) {
uni.request({
url: baseURL + url,
data: params,
header: {
'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
},
method: 'GET',
success: (res) => {
if (res.statusCode != 200)) {
uni.showToast({
title: res.statusCode +'：'+ res.data.message,
mask: true,
icon: "none"
});
if(res.statusCode == 401){
setTimeout(() => {
uni.removeStorageSync('access_token');
uni.removeStorageSync('userinfo');
uni.navigateTo({
url: '/pages/login/login',
animationType: 'pop-in',
animationDuration: 300
})
}, 1500)
}
}else{
resolve(res.data);
if (res.data.code == 0) {
uni.showToast({
title: res.data.message,
mask: true,
icon: "none"
});
}
}
},
fail: (res) => {
reject(res)
},
});
}
});
}
export function post(url, params = {}) {
return new Promise((resolve, reject) => {
// 如果需要在header頭中加入token，使用這段代碼 header: header,
// if(uni.getStorageSync('access_token')){
// header.token = uni.getStorageSync('access_token')
// }
if (requestStart(params)) {
uni.request({
url: baseURL + url,
data: params,
header: {
'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
},
method: 'POST',
success: (res) => {
if (res.statusCode != 200)) {
uni.showToast({
title: res.statusCode +'：'+ res.data.message,
mask: true,
icon: "none"
});
if(res.statusCode == 401){
setTimeout(() => {
uni.removeStorageSync('access_token');
uni.removeStorageSync('userinfo');
uni.navigateTo({
url: '/pages/login/login',
animationType: 'pop-in',
animationDuration: 300
})
}, 1500)
}
}else{
resolve(res.data);
if (res.data.code == 0) {
uni.showToast({
title: res.data.message,
mask: true,
icon: "none"
});
}
}
},
fail: (res) => {
reject(res)
},
});
}
});
}
var http = {
post,
get
};
export default http;main.js引入
import http from '@/utils/request.js'; //接口請求封裝
Object.assign(Vue.prototype, {
'$http': http,
})
在頁面中使用
onShow(){
this.$http.post("/api/",{
// id:1
}).then(res=>{
if(res.code == 200){
// 成功
}else{
// 失敗需要進行的操作
}
})
},
總結
到此這篇關于uniapp中uni.request(OBJECT)接口請求封裝的文章就介紹到這了,更多相關uniapp uni.request(OBJECT)接口請求封裝內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
微信小程序如何修改radio和checkbox的默認樣式和圖標
這篇文章主要介紹了微信小程序修改radio和checkbox的默認樣式和圖標,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了JavaScript迭代器的含義及用法,迭代器就是為實現(xiàn)對不同集合進行統(tǒng)一遍歷操作的一種機制，只要給需要遍歷的數(shù)據結構部署Iterator接口，通過調用該接口，或者使用消耗該接口的API實現(xiàn)遍歷操作。,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了JS實現(xiàn)網頁上隨機產生超鏈接地址的方法,涉及JavaScript隨機數(shù)的相關使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了基于ts的動態(tài)接口數(shù)據配置的詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
這篇文章主要介紹了微信小程序封裝的HTTP請求,結合實例形式分析了微信小程序封裝基于wx.request方法的http請求相關操作與使用技巧,并附帶升級版示例供大家參考,需要的朋友可以參考下2019-05-05
JavaScript的性能問題不容小覷，這就需要我們開發(fā)人員在編寫JavaScript程序時多注意一些細節(jié)，本文非常詳細的介紹了一下JavaScript性能優(yōu)化方面的知識點，絕對是干貨，需要的朋友快來一起學習吧2016-01-01
這篇文章主要介紹了JS塊級作用域和私有變量,結合實例形式較為詳細的分析了javascript塊級作用域和私有變量相關概念、原理、操作技巧,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了前端TypeScript時間格式化函數(shù)的相關資料,包括日期格式化formatDate、獲取周數(shù)getWeek、相對時間格式化formatPast、時間問候語formatAxis以及日期時間格式化parseTime和parseDate,每個方法都有詳細的參數(shù)說明和示例,需要的朋友可以參考下2025-02-02
篇文章主要介紹了Bootstrap學習筆記之按鈕基本樣式的相關資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家詳細介紹了p5.js臨摹動態(tài)圖形的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10