快捷導(dǎo)航

uniapp中uni.request(OBJECT)接口請求封裝實例代碼

更新時間：2022年12月09日 14:11:09 作者：sunly_

在開發(fā)的時候經(jīng)常會用到前端請求后端接口,每次的請求都會出現(xiàn)地址不一樣,參數(shù)不一樣,方式不一樣等等情況,下面這篇文章主要給大家介紹了關(guān)于uniapp中uni.request(OBJECT)接口請求封裝的相關(guān)資料,需要的朋友可以參考下

封裝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(); // 在當(dāng)前頁面顯示導(dǎo)航條加載動畫。
	// 	uni.showLoading({
	// 		title: '加載中',
	// 		mask: true
	// 	});
	return params;
}

// 對于 GET 方法，會將數(shù)據(jù)轉(zhuǎn)換為 query string。例如 { name: 'name', age: 18 } 轉(zhuǎn)換后的結(jié)果是 name=name&age=18。
// 對于 POST 方法且 header['content-type'] 為 application/json 的數(shù)據(jù)，會進(jìn)行 JSON 序列化。
// 對于 POST 方法且 header['content-type'] 為 application/x-www-form-urlencoded 的數(shù)據(jù)，會將數(shù)據(jù)轉(zhuǎn)換為 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{
			// 失敗需要進(jìn)行的操作
		}
	})
},

總結(jié)

到此這篇關(guān)于uniapp中uni.request(OBJECT)接口請求封裝的文章就介紹到這了,更多相關(guān)uniapp uni.request(OBJECT)接口請求封裝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: