微信小程序如何封装数据请求

完成一个小程序项目，我们肯定会请求跟多接口，为了我们代码的可读性和可维护性更好，我们可以将我们请求的接口进行封装。封装步骤如下。

1.首先在根目录下创建一个http文件夹，在文件夹下分别创建：env.js,api.js,request.js三个文件。好了废话不多说直接上代码。

env.js代码如下

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

module.exports = {
  // 开发环境
  dev: {
    baseUrl: 'http://localhost:3000'
  },
  // 测试环境
  test: {
    baseUrl: 'www.test.com'
  },
  // 线上环境
  prod: {
    baseUrl: 'https://api.it120.cc'
  }

}

api.js代码如下

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

// 基于业务封装的接口
module.exports = {
  
  /**
   * 拿封装商品列表举例
   */
  // url,method,data,isSubDomain
  getGoodsList: () => {
    // console.log('获取商品列表方法')
    return request('/shop/goods/list','POST',{},true); //第一个参数为地址，第二个参数为请求方式，第三个参数为传递的参数，第四个参数为是否需要token
  },

//.........可以根据自己的数据继续封装
 
}

request.js 代码如下

// 引入env中的url
const {
  baseUrl
} = require('./env.js').prod
// 专属域名
const subDomain = 'agai'
module.exports = {
  /**二次封装wx.request()
   * url:请求的接口地址
   * method:请求方式
   * data传参
   * */
  request: (url, method = 'GET', data = {}, isSubDomain) => {
    // console.log(baseUrl)
    let _url = `${baseUrl}/${isSubDomain?subDomain:''}${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
          if(code==0){
            wx.hideLoading()
            resolve(res.data)
          }else{
            wx.showToast({
              title: '数据请求失败',
            })
          }
        }
      })
    })

  }

}

2. 然后就是如何引用，很简单，在那个页面需要请求数据在哪个页面引入即可。

拿index页面来举例：
(1) 在index.js页面顶部定义如下代码

const {
  getGoodsList,
} = require('../../http/api.js')

（2）在page中去请求数据

    getGoodsList().then(res => {
	console.log(res)  //res即是请求到的数据
})

欢迎个位大牛指点评论。。。