微信小程序封装wx.request接口(两种方式)

方式一:在根目录新建一个api.js的文件用于存放wx.request的代码

api.js

const app = getApp();
let postApi = function (apiUrl, data, successCallback, errorCallback, completeCallback){let apiData = {};if (data){apiData=data;}apiData.user_token=app.globalData.userToken;wx.request({url: app.rootUrl + apiUrl,method: "POST",data: apiData,success: res => {successCallback(res.data);},fail: err => {if (errorCallback){errorCallback(err);}else{wx.showToast({title: e,icon: 'none',duration: 1500,mask: false})}},complete: () => {if (completeCallback) {completeCallback();}}})
}export default postApi;

注意：在app.js中定义rootUrl，rootUrl是接口url的公共部分，apiUrl是接口url的剩余部分

index.js中调用接口

const app = getApp();
import postApi from "../../api.js";postApi("apiUrl?_tq=" + new Date().getTime(), data, res => {if (res.code == 0) {//请求成功执行}})

方式二:request.js文件

// export const API_URL = ''; // 项目域名/*** 网络请求封装 fetch*/
export default function fetch(url, params, showLoading = true, method) {if (showLoading) {wx.showLoading({ title: '加载中' });}var cookie = wx.getStorageSync('cookie');if (!cookie) {cookie = '';}return new Promise((resolve, reject) => {wx.request({url: `${API_URL}${url}`,data: params || {},method: method || 'post',header: {"Accept": "*/*","Content-Type": "application/json; charset=UTF-8'","Cookie": cookie,},success: res => {resolve(res.data);},fail: error => {reject(error);},complete() {if (showLoading) {wx.hideLoading();}}})})
}

在app.js文件引入该文件

在页面调用接口

在页面引入const app = getApp();

  getWxUser(userD) {var params = {name:user.name,phone:userD.phone}app.fetch(接口地址, params).then(ret => {if (ret.status) {} else {wx.showModal({showCancel: false,content: ret.errmsg});}})},

微信小程序封装wx.request接口(两种方式)相关推荐

微信小程序获取用户信息的两种方式
1.只获取头像和昵称(不能将用户信息返回给后端) <open-data class="tx" type="userAvatarUrl"></o ...
今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2...
今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2 查官方文档解决方法在 PowerShell中运行以下内容, 然后重启服务器 # Enab ...
微信小程序之wx.request:fail错误，真机预览请求无效问题解决，安卓,ios网络预览异常
微信小程序之wx.request:fail错误,真机预览请求无效问题解决,安卓,ios网络预览异常参考文章: (1)微信小程序之wx.request:fail错误,真机预览请求无效问题解决,安卓,i ...
微信小程序页面间通信的5种方式
微信小程序页面间通的5种方式 PageModel(页面模型)对小程序而言是很重要的一个概念,从app.json中也可以看到,小程序就是由一个个页面组成的. 如上图,这是一个常见结构的小程序:首页是一个 ...
详解微信小程序页面间传递信息的三种方式
详解微信小程序页面间传递信息的三种方式在开发微信小程序的时候,经常会遇到在页面间传递信息的情况,有三种方法可以实现. 1. 使用数据缓存将要存储的数据使用以下方法放入缓存 wx.setStorag ...
微信小程序生成二维码的两种方式
微信小程序生成二维码的两种方式 2020/11/10 第一种,利用网络api自动生成 <image class="xin-erma" src="{{'https:/ ...
微信小程序实现跳转的几种方式总结（推荐）
今天把实现微信页面的跳转的几种方法总结分享下 1.使用导航组件,标签,页面链接来实现(可以发现点击时有背景) <view class=&quo ...
微信小程序设置背景图的几种方式
微信小程序设置背景图的几种方式原本在html中可以通过background-image来设置背景图片 .page {width: 100%;height: 100%;background-size: ...
微信小程序之wx.request:fail错误，真机预览请求无效问题解决，安卓,ios网络预览异常(转)...
问题描述:域名已经备案,我全部都有,也在后台配置了,但是手机预览,还是请求失败, PC端是可以请求数据出来的新版开发者工具增加了https检查功能:可使用此功能直接检查排查ssl协议版本问题: 可能 ...

微信小程序封装wx.request接口(两种方式)

微信小程序封装wx.request接口(两种方式)相关推荐

最新文章

热门文章