微信小程序封装api

这是一篇小白看了都能明白的文章，希望大家多多支持

废话不多说直接上代码

首先我们需要在Util下创建一个request的文件

第二步：在app.js中添加一个环境变量并且在request.js中进行分装我们的请求

// app.js
import {
  URL,
  organId
} from './utils/url.js';

App({
  onLaunch() {

    //环境变量
    const accountInfo = wx.getAccountInfoSync(); //查看环境
    this.globalData.envVersion = accountInfo.miniProgram.envVersion
  },
  globalData: {
    envVersion: null,
 
  }
})

const app = getApp();

const URL = {
  develop: {
    // BASE_URL: "", //测试域名
    BASE_URL: "", //服务器域名
  },
  trial: {
    // BASE_URL: "", //测试域名
    BASE_URL: "", //服务器域名
  },
  release: {
     // BASE_URL: "", //测试域名
    BASE_URL: "", //服务器域名
  }
}
/**
 * GET请求封装
 */
function get(url, data = {}) {
  return request(url, 'GET', data)
}

/**
 * POST请求封装
 */
function post(url, data = {}) {
  return request(url, 'POST', data)
}
/**
 * @description 上传文件
 * @param {*} url 请求地址
 * @param {*} data 参数
 */
function upLoad(url, data = {}) {
  return uploadFile(url, 'POST', data)
}

/**
 * 微信的request
 */
function request(url, method = "GET", data = {}) {
  var contentType = method == 'GET' ? 'application/json' : 'application/x-www-form-urlencoded'
  return new Promise(function (resolve, reject) {
    wx.request({
      url: URL[app.globalData.envVersion].BASE_URL + url,
      data: data,
      method: method,
      header: {
        'content-Type': contentType,
        'token': wx.getStorageSync('token')
      },
      success: function (res) {
        // console.log("请求头",res)
        if (res.statusCode == 200) {
          try {
            var data = res.data
            // 请求成功处理
            if (data.status == "success") {
              resolve(data);
            } else {
              //错误
              // 20004 //权限失效或token过期
              if (res.data.code == 20004) {
                wx.removeStorageSync('token')
                wx.removeStorageSync('userno')
                wx.navigateTo({
                  url: '/pages/login/login',
                })
              }
              // 20003 //您没有权限访问，请获取系统权限
              if (res.data.code == 20003) {
                wx.removeStorageSync('token')
                wx.removeStorageSync('userno')
                wx.navigateTo({
                  url: '/pages/login/login',
                })
              }
              reject(data)
            }
          } catch (error) {
            reject("数据获取失败")
          }
        } else {
          reject("请求失败：", res)
        }
      },
      fail: function (err) {
        //服务器连接异常
        reject(err, "服务器连接异常，请检查网络再试")
      }
    })
  });
}


module.exports = {
  request,
  get,
  post,
  URL,
}

第三步：在Util下创建一个api的文件进行暴露我们的接口

import {
  request,
  get,
  post,
  upLoad
} from './request';
// 获取验证码
function dailyManagementList(params) {
  return post("api/sehcs-mini-app/a002/dailyManagementList", params)
}
// 暴露接口
export default {
  dailyManagementList
}

第四步：在我们的所需要的js中进行调用暴露的接口

// pages/menu4/index.js
import https from '../../utils/api';
Page({

  /**
   * 页面的初始数据
   */
  data: {},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {},
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    //每次进入页面都会调用一次接口
    this.dailyManagementList();
  }, 
   //通过http来调用我们暴露的接口然后请求
  dailyManagementList:function(){
    http.dailyManagementList({
      //请求的参数
      phone:wx.getStorageSync('phone')
    }).then(res => {
      console.log("成功", res.data);
       
      });
      
    }).catch(err => {
      console.log("失败", err);  

    })
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

这样就可以调通我们的接口了