uniapp封装request请求

第一步:在根目录下创建request文件夹,并在文件夹下创建request.js

 第二步:将以下代码放入request.js中

// 定义请求地址
const BASE_URL = "https://xxx.com/"  //后台API地址
// 封装请求方法
const request = (options) => {
	return new Promise((resolve, reject) => {
		uni.request({
			url: BASE_URL + options.url,
			method: options.method || 'GET',
			header: {
				authtoken: '2c9080345f3d6b62015f3d774e59000d:4711be44a1dac5b4571f39438b3642b9' //可以从vuex或uni.getStorageSync中拿到token
			},
			data: options.data || {},
			success: (res) => {
				const data = res.data
				if (res.statusCode !== 200) {
					handleStatus(res) //处理状态码
					return
				}
				resolve(data)
			},
			fail: (error) => {
				uni.showToast({
					icon: 'error',
					title: '系统错误'
				})
				reject(error)
			},
			complete: (res) => {

			}
		})
	})
}
const handleStatus = (res) => {
	switch (res.statusCode) {
		// 401: 未登录
		// 未登录则跳转登录页面,并携带当前页面的路径
		// 在登录成功后返回当前页面,这一步需要在登录页操作。                
		case 401:
			uni.navigateTo({
				url: ''
			})
			return
			break;

			// 403 token过期
			// 登录过期对用户进行提示
			// 清除本地token和清空vuex中token对象
			// 跳转登录页面                
		case 403:
			uni.showToast({
				icon: 'error',
				title: res.data.resultMsg
			})
			break;

			// 404请求不存在
		case 404:

			break;
			// 其他错误,直接抛出错误提示
		default:
	}
}
export function get(url, params) {
	return new Promise((resolve, reject) => {
		request({
			url: url,
			method: 'GET',
			data: params,
		}).then(res => {

			resolve(res);
		}).catch(err => {
			reject(err)
		})
	});
}
export function post(url, params, responseType) {
	return new Promise((resolve, reject) => {
		request({
				url: url,
				method: 'POST',
				data: params,

			})
			.then(res => {
				resolve(res);
			})
			.catch(err => {
				reject(err)
			})
	});
}

 第三步:创建api文件夹并生成api.js

 api.js中引入封装好的get和post方法

import { get, post } from '@/request/request.js'
export const getEventLabelDict = obj => get("labeling/xxxx/xx/xxxxx",obj)

第四步:页面中调用接口即可

<template>
	<view>
	</view>
</template>

<script>
	import {
		getEventLabelDict
	} from "../../api/api";
	export default {
		data() {
			return {
				
			}
		},
		created() {
			getEventLabelDict().then((res)=>{
				console.log('res',res)
			})
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	
</style>

大家可以根据自身需求在请求中添加相关操作~~

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值