【uniapp】微信小程序 request接口调用与封装及几个封装工具类

官方示例代码：

封装代码：放入utils包中：

tip.js：

function isFunction(fun) {
  return toString.call(fun) === '[object Function]';
}
/**
 * 提示与加载工具类
 */
export default class Tips {
  constructor() {
    this.isLoading = false;
  }
  /**
   * 弹出提示框
   */

  // static success(title, duration = 500) {
  //   setTimeout(() => {
  //     wx.showToast({
  //       title: title,
  //       icon: "success",
  //       mask: true,
  //       duration: duration
  //     });
  //   }, 300);
  //   if (duration > 0) {
  //     return new Promise((resolve, reject) => {
  //       setTimeout(() => {
  //         resolve();
  //       }, duration);
  //     });
  //   }
  // }

  /**
   * 弹出确认窗口
   */
  static confirm(content, title = '提示', options = {}) {
    return new Promise((resolve, reject) => {
      wx.showModal({
        title: title,
        content: content,
        // showCancel: true,
        success: res => {
          if (res.confirm) {
            resolve(options);
          } else if (res.cancel) {
            reject(options);
          }
        },
        fail: res => {
          reject(options);
        }
      });
    }).catch(function(reason) {
      // console.log('catch:', reason);
    });
  }

  // 操作提示框
  static toast(title, callback, icon = 'none') {
    setTimeout(() => {
      wx.showToast({
        title: title,
        icon: icon,
        mask: true,
        duration: 1500
      });
    }, 200);
    if (callback && isFunction(callback)) {
      setTimeout(() => {
        callback();
      }, 1500);
    }
  };

  // 警告提示框
  static error(title = '操作失败', callback) {
    wx.showToast({
      title: title,
      image: '/images/error.png',
      mask: true,
      duration: 1500
    });
    // 隐藏结束回调
    if (callback && isFunction(callback)) {
      setTimeout(() => {
        callback();
      }, 500);
    }
  };
  // 操作成功提示框
  static success(title = '操作成功', callback) {
    wx.showToast({
      title: title,
      icon: 'success',
      mask: true,
      duration: 1500
    });
    // 隐藏结束回调
    if (callback && isFunction(callback)) {
      setTimeout(() => {
        callback();
      }, 500);
    }
  }
  /**
   * 弹出加载提示
   */
  static loading(title = '加载中') {
    if (Tips.isLoading) {
      return;
    };
    Tips.isLoading = true;
    wx.showLoading({
      title: title,
      mask: true
    });
  }

  /**
   * 加载完毕
   */
  static loaded() {
    if (Tips.isLoading) {
      Tips.isLoading = false;
      wx.hideLoading();
    }
  }

  static share(title, url, desc) {
    return {
      title: title,
      path: url,
      desc: desc,
      success: function(res) {
        Tips.toast('分享成功');
      }
    }
  }
}

/**
 * 静态变量，是否加载中
 */
Tips.isLoading = false;

constant.js：

const envUrl = 'https://xxxxxx'; // 开发环境
// const envUrl = 'https://xxxxx'; // 正式环境

// 接口基础地址
export const baseUrl = envUrl;

console.log(envVersion)

localStorage.js

const setStorage = (key, value) => {
	wx.setStorageSync(key, value)
}

const getStorage = (key) => {
	return wx.getStorageSync(key)
}

const removeStorage = (key, callback) => {
	wx.removeStorage({
		key:key,
		success(res) {
			callback && callback()
		}
	})
}

export {
	setStorage,
	getStorage,
	removeStorage
}

wxRequest.js：

//import util from './util';
import tip from './tip';
// import crypto from './aes';

import {
  baseUrl,
  appKey
} from './constant';

console.log(baseUrl,'baseUrl')

const wxRequest = async (params = {}, url, method = 'GET', showLoading = true) => {
  // 显示加载中
  if (showLoading) {
    tip.loading();
  }
  // const session_3rd = getStorage('session');session_3rd
  const data = {
    ...params,
    custom_app_key: appKey
  }
  return new Promise((resolve, reject) => {
    wx.request({
      url: baseUrl + url,
      method: method,
      data,
      header: {
        'Content-Type': 'application/json',

      },
      timeout: 10000,
      success(result) {
        const data = result.data;
        let errMsg = '';
        if (result.statusCode === 200) {
          if (data.code === 200) {
            resolve(data.data);
            if (showLoading) {
              // 隐藏加载中
              tip.loaded();
            }
            return;
          } else {
            errMsg = data.data;
          }
        } else {
          errMsg = data.Message;
        }
        reject(result);
        if (showLoading) {
          // 隐藏加载中
          tip.loaded();
        }
        tip.toast(errMsg || '请重新尝试')
      },
      fail(err) {
        console.log(err);
        if (err.errMsg === 'request:fail timeout') {
          tip.toast('请求超时，请重新尝试')
        } else {
          tip.toast(err.errMsg)
        }
        console.log('可能超时了')
        if (showLoading) {
          // 隐藏加载中
          tip.loaded();
        }
        reject(err);
      }
    })
  })

};

module.exports = {
  wxRequest
};

直接调用即可：

// 订单支付
const PayOrder_XXX = (params, showLoading = true) => wxRequest(params, '/api/Order/PayOrder_XXX', 'POST', showLoading);


//充值支付接口  api/Order/XXX
const CreateXXX = (params, showLoading = true) => wxRequest(params, '/api/Order/CreateSJCZOrder', 'POST', showLoading);

例如：CreateXXX

let data = {
        "custom_app_key":"ymdg",// 这个每个小程序不一样  固定值
        "session_3rd":"xxx",// 微信信息标识
        "realPay":"2000",// 实际支付金额
        "phone":"13xxxxx",// 手机号
       
    }
     
        CreateXXX(data).then(res => {
          console.log(res);
        })

异步vue2调用写法：

		// //获取设备实时信息
	async UserDeviceInfo() {
		// console.log(this.storeList, "this.storeList");
		const data = {
			custom_app_key: appKey,
			session_3rd: getStorage("session"), // 微信信息标识
			deviceId: this.DeviceId,
		};
		let userDevicesList = await GetUserDeviceInfo(data);

		this.DevicesList = userDevicesList

异步vue3调用写法：示例

		onMounted(async()=>{
				const data = {
					custom_app_key: appKey,
					session_3rd: getStorage("session"), // 微信信息标识
					deviceId: this.DeviceId,
				};
				const res = await GetUserDeviceInfo(data);			
				console.log(res);			
			})