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都有代码示例