uniapp接口封装请求和使用

封装request 请求 使用APP和小程序
文件目录:
根目录下 api --------- request.js
--------------------------- index.js
api/request.js:

//上传图片地址
let upload ='http://192.168.2.12:8018/app/file/uploadList'
export {
		upload
	}
export default {
	// 全局配置
	common: {
		baseUrl: "http://192.168.2.35:8018/",//请求地址前缀
		header: {
			'Content-Type': 'application/json;charset=UTF-8',
			'Content-Type': 'application/x-www-form-urlencoded'
		},
		data: {},
		method: 'GET',
		dataType: 'json'
	},

	// 请求 返回promise
	request(options = {}) {
		// 组织参数
		let cookie = uni.getStorageSync('Cookie')
		options.url = this.common.baseUrl + options.url
		options.header = options.header || this.common.header
		options.data = options.data || this.common.data
		options.method = options.method || this.common.method
		options.dataType = options.dataType || this.common.dataType
		if (cookie) {
			options.header['Cookie'] = cookie
		}
		// 请求
		return new Promise((res, rej) => {
			// 请求之前... todo
			// 请求中...
			uni.request({
				...options,
				success: (result) => {
					if(result.header['Set-Cookie']) uni.setStorageSync('Cookie',result.header['Set-Cookie'])
					// 服务端成功
					if (result.statusCode == 200) {
						if (result.data.code == 500 && result.data.msg == "请先登录") {
							// uni.setStorageSync('logintype','登录失效')
							// console.log("登录状态",uni.getStorageSync('logintype'))
						}
						if (result.data.code == 200) {
							return res(result.data)
						} else if (result.data.code == 500) {
							return res(result.data)
						} else if (result.data.code == 3) {
							return res(result.data)
						} else {
							return res(result.data)
						}
					} else if (result.statusCode == 500) {
						uni.showToast({
							title: '500: 内部服务器错误',
							icon: 'none',
							duration: 1500
						});
						console.log('500', result);
					} else if (result.statusCode == 400) {
						uni.showToast({
							title: '400: 参数错误',
							icon: 'none',
							duration: 1500
						});
						console.log('400', result);
					} else if (result.statusCode == 405) {
						uni.showToast({
							title: '405: 传参方式错误',
							icon: 'none',
							duration: 1500
						});
						console.log('405', result);
					} else if (result.statusCode == 404) {
						uni.showToast({
							title: '404 Not Found',
							icon: 'none',
							duration: 1500
						});
						console.log('404', result);
					} else if (result.statusCode == 415) {
						uni.showToast({
							title: '415: 服务器无法处理请求附带的媒体格式',
							icon: 'none',
							duration: 1500
						});
						console.log('415', result);
					} else {
						uni.showToast({
							title: '其他错误',
							icon: 'none'
						});
						console.log('other error', result);
					}
				},
				fail: (error) => {
					console.log(error)
					uni.showToast({
						title: '网络连接失败',
						icon: 'none'
					});
					return rej()
				}
			});
		}).catch((e) => {});
	},
	// get请求
	get(url, data = {}, options = {}) {
		options.url = url
		options.data = data
		options.method = 'GET'
		return this.request(options)
	},
	// post请求
	post(url, data = {}, options = {}) {
		options.url = url
		options.data = data
		options.method = 'POST'
		return this.request(options)
	},
	// delete请求
	del(url, data = {}, options = {}) {
		options.url = url
		options.data = data
		options.method = 'DELETE'
		return this.request(options)
	},
	// options请求
	options(url, data = {}, options = {}) {
		options.url = url
		options.data = data
		options.method = 'options'
		return this.request(options)
	},
	// put请求
	put(url, data = {}, options = {}) {
		options.url = url
		options.data = data
		options.method = 'put'
		return this.request(options)
	},
	// head请求
	head(url, data = {}, options = {}) {
		options.url = url
		options.data = data
		options.method = 'head'
		return this.request(options)
	},
	// trace请求
	trace(url, data = {}, options = {}) {
		options.url = url
		options.data = data
		options.method = 'trace'
		return this.request(options)
	},
	// connect请求
	connect(url, data = {}, options = {}) {
		options.url = url
		options.data = data
		options.method = 'connect'
		return this.request(options)
	},
}

api/index.js:

import request from '@/api/request.js'
// 登录---
export function login(data) {
	return request.post("app/login", data)
}

页面中使用:pages/index/index

<template>
	<view class="content" @click="bindlogin()">
		登录
	</view>
</template>

<script>
	import {//引入请求方法
		login//(封装的名字不要和methods里面的函数名字一样)
	} from '@/api/index.js'
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
			bindlogin() {
				// 写法1:(适用于formdata请求)
				let data = {
					code: '123'
				}
				login(data).then(res => {
					console.log("登录请求", res)
				})
				// 写法2:
				login({
					code: '123'
				}).then(res => {
					console.log("登录请求", res)
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

尚博TRUE

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值