uniapp中的请求接口封装

本文主要是介绍uniapp中的请求接口封装，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

安装

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' // 处理data
const 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
})

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

这篇关于uniapp中的请求接口封装的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！