小程序 报错errMsg: “hideLoading:fail:toast can‘t be found“ ？

大家好，欢迎来到IT知识分享网。

小程序体验版上/真机上报错：errMsg: “hideLoading:fail:toast can’t be found” ？模拟器上却看不到，

• wx.showLoading 和 wx.showToast 同时只能显示一个；
• wx.showLoading 应与 wx.hideLoading 配对使用；
• 把请求接口统一封装，开始请求接口时showLoading，请求接口后hideLoading
• 一个页面同时请求多个接口，由于请求是异步的，很有可能上一个开启了showLoading还没请求完成下一个有开始请求了，这个时候的showLoading与hideLoading就没有对应了。

一、错误代码示例和解决方法 

import api from'./api' var host = 'http://127.0.0.1::5500/'; / * POST请求， * URL：接口 * postData：参数，json类型 * doSuccess：成功的回调函数 * doFail：失败的回调函数 */ //10016：token为空，10008：token无效，20037：集合为空 function request(url, postData) { postData.token = wx.getStorageSync("token");//相当于openid wx.showLoading({ title: '加载中...', mask: true }); return new Promise((resolve, reject)=>{ wx.request({ //项目的真正接口，通过字符串拼接方式实现 url: url, header: { "content-type": "application/json;charset=UTF-8" }, data: postData, method: 'POST', dataType: "json", success: function (res) { //参数值为res.data,直接将返回的数据传入 if(res.data.code === "0000"){ resolve(res.data); } else { wx.showToast({ title: res.data.msg, icon: 'none', duration: 2000 }); } }, fail: function (err) { reject(err) }, complete: function(res){ wx.hideLoading(); } }) }) } / * module.exports用来导出代码 * js文件中通过var call = require("../util/request.js") 加载 * 在引入引入文件的时候" "里面的内容通过../../../这种类型，小程序的编译器会自动提示，因为你可能 * 项目目录不止一级，不同的js文件对应的工具类的位置不一样 * 使用： call.post("接口地址", {参数}, function(res){}) */ module.exports.post = request; module.exports.get = getData; 

这是我第一次封装的代码，看逻辑没什么问题，但是真机调试第一次打开总是报错。经过测试发现：

• success 比 complete 先运行。因此上面代码 wx.showLoading 还没闭合时，wx.showToast 就开始显示了。
• errMsg: “hideLoading:fail:toast can’t be found” 不是 wx.request 请求方法中的 fail 和 complete 发出来的错误信息，而是 wx.hideLoading 发出来的错误信息。

结合上面的发现，重新改了一次请求接口的封装过程：

import api from'./api' var host = 'http://127.0.0.1:5500/'; //10016：token为空，10008：token无效，20037：集合为空 function request(url, postData) { postData.token = wx.getStorageSync("token");//相当于openid wx.showLoading({ title: '加载中...', mask: true }); return new Promise((resolve, reject)=>{ wx.request({ //项目的真正接口，通过字符串拼接方式实现 url: url, header: { "content-type": "application/json;charset=UTF-8" }, data: postData, method: 'POST', dataType: "json", success: function (res) { //参数值为res.data,直接将返回的数据传入 if(res.data.code === "0000"){ resolve(res.data); } else { // wx.showToast({ title: res.data.msg, icon: 'none', duration: 2000 }); } }, fail: function (err) { reject(err) }, complete: function(res){ wx.hideLoading({ complete: function(hide){ console.log(hide); //可以看到错误信息被打印出来了 if(res.data.code === "0000"){ } else { wx.showToast({ title: res.data.msg, icon: 'none', duration: 2000 }); } } }); } }) }) } module.exports.post = request; 

二、module.exports

顺便一提上面 module.exports.post = 函数名/变量名 和 module.exports = {} 的区别：

（1）上面我使用的是 module.exports.自定义名称A = 函数名 这种方法，在调用时，

//引用文件路径：在Page()的最外层 import 自定义文件名 from '文件地址'; //使用：与函数名无关了 自定义文件名.自定义名称A();

module.exports.自定义名称A = 函数名 中，“自定义名称A”相当于给函数名重新命名，所以自定义名称A 经常都是与函数名同名。

（2） module.exports = {
 post } ，这种写法相当于：module.exports = { post: post }，与上面写法在调用是的区别在于：

import {方法名1, 方法名2} from '文件地址'; //使用：直接使用 方法名1();

参考：

1. 小程序showLoading：网络请求前显示“加载中…”，请求完成时关闭加载中

2. 关于微信小程序VM22:2 (in promise) MiniProgramError {“errMsg“:“hideLoading:fail:toast can‘t be found“

3. 小程序真机调试报错： errMsg“:“hideLoading:fail:toast can‘t be found“？