uniapp请求接口的几种方式

1.第一种就是不用封装直接请求
data中多个参数就是 "https://xxxxx/?id=1&type=2"形式

 uni.request({
	url: 'https://xxxxx/xx/detail', 
		data: {//参数
			type: 2,
			id:1,
		},
		header: {
			// 'Content-Type': 'application/x-www-form-urlencoded'
			 'Content-Type': 'application/json' //自定义请求头信息
		},
		method:'GET',//请求方式,必须为大写
		success: (res) => {
			console.log('接口返回------',res);
		}
  })

2.第二种就是经过封装
封装的接口,可以方便统一更换接口,走拦截器等

(1)request.js文件中代码如下:

const request = (url, data, method = 'GET') => {
	return new Promise((resolve, reject) => {
		const token = uni.getStorageSync('token');
		console.log(token,'走接口时token----')
		let header = {
			"Content-Type": "application/json"
		}
		if (token) {
			header['Authorization'] = token
		}
		uni.request({
			url: url,
			data: data,
			method: method,
			header: header,
			success: res => {
				console.log(res,'封装接口0=-----------')
				if (res.data.code == 200) {
					resolve(res.data)
					reject(res)
				}else if (res.data.code == '') {//有的接口返回code空-发票字典,也解析
					resolve(res.data)
					reject(res)
				}else if (res.statusCode==200) {//阿里银行名称查询-解析
					resolve(res.data)
					reject(res)
				} 
				else {
					uni.showToast({title: res.data.message,icon: "none"})
					// reject(res)
				}
			},
			fail: res => {
				reject(res)
			}
		})
	});
}
module.exports = {
	request: request,
}

(2)api.js文件中代码如下:

	const DOMAIN_PREFIX = 'http://192.168.0.110:8080'
// #ifdef H5
	const WX_API_BASE =  DOMAIN_PREFIX  +'/api'
	const TERMINAL = 2
// #endif

// #ifdef APP-PLUS || APP-NVUE
	const TERMINAL = 3
// #endif

module.exports = {
   getMessage: WX_API_BASE + '/notice/getList',//消息列表查询      		
}
页面通过h5打开时,这时候请求地址为:http://192.168.0.110:8080/api/notice/getList

对应的页面使用代码如下:

<template>
	<view class="messageCenter">
			
		
	</view>
</template>

<script>
	const NET = require('../../utils/request')
	const API = require('../../config/api')
	export default {
		data() {
			return {
				messageList: [],//系统消息列表
				page: 1,
				pageSize: 5,
				loadingType: 0,//1:停止下拉刷新,0:加载下一页
			}
		},
		onLoad() {
		},
		onShow(){//监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
			this.page = 1
			this.messageList = []
			this.getAllMessage()//查看详情,返回需要调列表接口
		},
		//页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。
		onReachBottom() {
			if(this.collectionTypeFlag == 0){//订单下拉刷新
				if (this.loadingType == 1) {
					uni.stopPullDownRefresh()
				} else {
					this.page = this.page + 1
					this.getAllMessage()
				}
			}
		},
		methods: {
			getAllMessage() {//系统消息
				uni.showLoading({
					title:'加载中...'
				})
				NET.request(API.getMessage, {
					'page': this.page,
					'pageSize': this.pageSize,
				}, 'GET').then(res => {
					uni.hideLoading()
					if (res.data.length == 0) {
						this.loadingType = 1
						this.page = this.page
					} 
					else {
						let _messageList = this.messageList.concat(res.data.list)
					}
				}).catch(res => {
					uni.hideLoading()
					uni.showToast({title: '系统消息查询失败',	icon: "none"})
				})
			},
			
			
		}
	}
</script>
<style lang="scss" scoped>

</style>

本人项目中正常使用,有空新建项目测试下--------------~~~

3.我平常写东西也会参考**uniapp插件市场**,比如客服聊天功能没做过怎么办???这时候可以去插件市场看看源码,地址如下:

4.也可以自己在hbuilderx中新建一个项目-参考uniapp官网的接口请求示例,callback/promise/async/await都有代码示例

启动后项目页面接口示例:
uniapp请求接口的几种方式_第1张图片

你可能感兴趣的:(vue,uniapp,插件市场,uniapp接口/接口封装)