uniapp封装request请求(前端封装request请求接口)

安装

npm install qs // 用来序列化post类型的数据

引入

import baseUrl from '../baseUrl'; // url地址信息import qs from 'qs' // 处理data

环境切换

uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。

uniapp有自己的生产和开发环境，也可以配置其他的环境；大家可以去观看官方文档

开发环境和生产环境

if(process.env.NODE_ENV === 'development'){    console.log('开发环境')
}else{    console.log('生产环境')
}

post请求头的设置

post请求的时候，需要添加一些请求头；一般默认的请求头是：‘
application/x-www-form-urlencoded ’

header = {    'Content-Type': 'application/x-www-form-urlencoded',}

响应数据

当请求参数返回的时候；查看code数据，给出响应

switch (dataType.code * 1) { // 拦截返回参数
	case 0:
	resolve(dataType)	break;	case 1003:
		uni.showModal({		title: '登录已过期',		content: '很抱歉，登录已过期，请重新登录',		confirmText: '重新登录',		success: function(res) {			if (res.confirm) { // 点击确定
			//去登录页面
			console.log('用户');
			uni.navigateTo({			    // 切记这儿需要哈pages.json保持一致；不能有.vue后缀
			    url: '/pages/views/login/index'
		        });
			} else if (res.cancel) {			console.log('用户点击取消');
			}
			}
		})		    break;	case -1:
	    uni.showModal({			title: '请求数据失败',			content: '获取数据失败！',			confirmText: '确定',			showCancel: false,	            success: function(res) {		    if (res.confirm) {} else if (res.cancel) {			console.log('用户点击取消');
		    }
		}
	})	break}

完整版

import baseUrl from '../baseUrl';import qs from 'qs' // 处理dataconst request = (params) => {	/*
	 * 1.初始化值
	 */
	let _self = this;	let url = params.url;	let method = params.method || 'GET';	let data = params.data || {};
	data.token = "default-access_token" // default-access_token
	/*
	 *2.判断token
	 */
	if (!params.token) { // 如果没有传递token
		let token = uni.getStorageSync('token'); // 在本地查找
		if (!token) { // 如果本地没有就跳转到登录页面
			uni.navigateTo({				url: 'pages/views/login/index'
			});
		} else {
			data.token = '179509245-9c91827e0224bdc18d0b118b8be1b5af';
		}
	}	/*
	 * 3.添加头部
	 */
	let defaultOpot = {		// 'Content-Type': 'application/x-www-form-urlencoded',
		'Terminal-Type': 'innerH5',		'Content-Type': 'application/json;charset=UTF-8',
	}	/*
	 * 4.处理 POST
	 */
	let header = {}
	method = method.toUpperCase()	if (method == 'POST') {
		header = {			'Content-Type': 'application/x-www-form-urlencoded',
		}
		data = qs.stringify(data)
	}	// 5.请求地址
	const requestUrl = baseUrl.server + url;
	uni.showLoading({		title: '加载中...'
	});	// 6.用 Promise 创建回调
	return new Promise((resolve, reject) => {
		uni.request({				url: requestUrl,				method: method,				header: Object.assign({}, defaultOpot, header),				data: data,				dataType: 'json',
			})
			.then(res => { // 成功
				if (res[1] && res[1].statusCode === 200) {					let {						data: dataType
					} = res[1]					switch (dataType.code * 1) { // 拦截返回参数
						case 0:
							resolve(dataType)							break;						case 1003:
							uni.showModal({								title: '登录已过期',								content: '很抱歉，登录已过期，请重新登录',								confirmText: '重新登录',								success: function(res) {									if (res.confirm) { // 点击确定
										//去登录页面
										console.log('用户');
										uni.navigateTo({											// 切记这儿需要哈pages.json保持一致；不能有.vue后缀
											url: '/pages/views/login/index'
										});
									} else if (res.cancel) {										console.log('用户点击取消');
									}
								}
							})							break;						case -1:
							uni.showModal({								title: '请求数据失败',								content: '获取数据失败！',								confirmText: '确定',								showCancel: false,								success: function(res) {									if (res.confirm) {} else if (res.cancel) {										console.log('用户点击取消');
									}
								}
							})							break
					}
				}
			})
			.catch(err => { // 错误
				reject(err)
			})
			.finally(() => {				console.log('不管是否成功都要执行')
				uni.hideLoading();
			})
	})
}export default request

在api中封装接口

import request from '../../utils/request.js'/*
* 1.获取商城楼层列表
*/export function getFloorList(){	return request({		url:'/***',		method:'get'
	})
}export function getCartProducts(){	return request({		url:'/***',		method:'POST'
	})
}

在组件中使用

引入

import {getFloorList,getCartProducts} from '../../api/mall/index.js';

使用

getFloorList().then(res=>{	this.list = res.data
})

以上可能不是很完整；大家可以根据自己的需要进行配置即可。