小程序封装请求接口数据方法

第一步:先在util文件里新建index.js,写入以下代码。
在这里插入图片描述
const baseUrl = 'http://192.168.0.117:8080/SC_ncm'
/**
* 数据请求模块
* 接口地址 http://daxun.kuboy.top/apidoc
* 先显示加载框,然后请求结束加载框消失
*
*/
export function request (url, data) {
// 显示加载中
// 参考https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showLoading.html
wx.showLoading({
title: '加载中',
})
// 使用promise 解决异步操作问题,此处还可以使用 async + await
return new Promise((resolve, reject) => {
// 微信小程序的数据请求方法
// 必须配置小程序的安全域名,
// 在开发阶段可以在“详情” - “本地设置” - 勾选中 不校验请求域名、web-view(业务域名)、TLS版本及HTTPS证书
wx.request({
url: baseUrl + url,
method:"POST",
data: data || {},
success: (res) => {
// 隐藏加载中
wx.hideLoading();
// 后续处理
resolve(res.data)
}
})
})
}
/**
* 可消失的提示框 - 默认只显示文字
* str 提示内容
* icon 是否需要图标,none 、 success(默认值) 、 loading
*/
export function Toast (str, icon) {
// 微信提供的API接口
// 参照 https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html
wx.showToast({
title: str,
icon: icon || 'none'
})
}
第二步:在所需的页面中page.js中写入,需要导入刚才所写的文件夹
import { request } from ‘./…/…/utils/index.js’
在这里插入图片描述
//index.js
//获取应用实例
const app = getApp()
import { request } from './../../utils/index.js'
Page({
data: {
},
onLoad: function () {
this.queryMenu()
},
queryMenu(){
let params = {
food_name:"111",
food_type:"111",
restaurant_id:"SCNC2006171751500765122580"
}
request('/checkLogin',params).then(data => {
console.log(data)
// 微信小程序修改数据的方式
})
},
})
posted @   SultanST  阅读(89)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示