微信小程序和后台数据交互-方法封装

1.创建http文件夹，内分别创建 env.js,api.js,request.js

env.js:

//设置公共访问的url，即环境变量

module.exports = {
  // 测试环境
  dev: {
    baseUrl: 'http://localhost:8081'
  },
  //开发环境
  test: {
    baseUrl: ''
  },
  // 线上环境
  prod: {
    baseUrl: ''
  }

}

api.js：

// 引入request请求
const {
  request
} = require('./request.js')

// 基于业务封装的接口
module.exports = {
  
  /**
   * 随便定义一个方法举例，
   */
  // url,method,data,isSubDomain
  getList: (url,method,data,flag) => {
    //第一个参数为地址，第二个参数为请求方式，第三个参数为传递的参数，第四个参数为是否需要token
    return request(url,method,data,flag); 
  }
 
}

request.js：

// 引入env中的url
const {
  baseUrl
} = require('./env.js').dev
// 专属域名
const domain = ''
module.exports = {
  /**二次封装wx.request()
   * url:请求的接口地址
   * method:请求方式
   * data传参
   * */
  request: (url, method, data = {}, isSubDomain) => {
    console.log(baseUrl)
    let _url = `${baseUrl}/${isSubDomain?domain:''}${url}`
    return new Promise((resolve, reject) => {
      wx.showLoading({
        title:"正在加载"
      })
      wx.request({
        url: _url,
        data: data,
        method: method,
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success: (res) => {
          // console.log(res)
          let code =res.data.status
          if(code==200){
            wx.hideLoading()
            resolve(res.data)
          }else{
            wx.showToast({
              title: '数据请求失败',
            })
          }
        }
      })
    })

  }

}

page中示例调用：

//获取应用实例
const app = getApp()
const {
  getList,
} = require('../../util/api.js')

Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    getList('/test/getList','GET',{id:9779},false).then(res => {
      console.log(res)  //res即是请求到的数据
    })
  }
})