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

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

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即是请求到的数据
})

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