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

小程序体验版上/真机上报错：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“？