WeChat小程序封装数据请求

• 封装数据请求
  • 环境地址的统一

//env.js
module.exports={
  //开发环境
  dev:{
    baseUrl:'http://127.0.0.1:8080'
  },
  //生产环境
  prod:{
    baseUrl:'https://api.it120.cc'
  },
  //测试环境
  test:{
    baseUrl:'https://api.1909A.com'
  }
}

• 业务数据请求方法的统一
  • 商品列表接口
  • 详情接口
  • 加入收藏
  • 搜索接口
  • 。。。

//api.js
const { request }=require('./request.js');

//项目中用到的各种业务接口的封装

module.exports={

  //商品分类接口
  goodsCate:()=> {

    return request('shop/goods/category/all','GET','',true)

  },
  //banner图接口
  getBanner:()=>{},
  //商品详情接口
  getDetail:(id)=>{

    return request('shop/goods/detail','GET',{id:id},true)
  },
  //其他接口....

}

• ajax的封装（ajax:axios,wx.request,xmlHttpRequest,fetch）

//request.js 针对wx.requeste的二次封装
const { baseUrl } = require('./env.js').prod
//封装ajax

const vipUrl = 'hjl'

module.exports = {

  request: function (url, method = "GET", data = {}, isSubDomain = true) {

    let fullUrl = `${baseUrl}/${isSubDomain ? vipUrl : ''}/${url}`;

    wx.showLoading({
      title: '玩命加载中',
    })


    return new Promise((resolve, reject) => {

      wx.request({
        url: fullUrl,
        method,
        data,
        header: {
          'Content-type': 'application/x-www-form-urlencoded'
        },
        success(res) {
          // console.log('res::',res)
          if (res.statusCode === 200 && res.data.code === 0) {
            resolve(res.data.data)

            wx.hideLoading()
          } else {
            wx.showToast({
              title: '接口有问题，请检查',
            })
            reject('接口有问题，请检查')
          }
        },
        fail(error) {
          wx.showToast({
            title: '数据接口有问题',
          })
          reject('数据接口有问题')

        }
      })


    })


  }



}

---

本人开发的微信小程序（已上线）、公众号及网站二维码：
有兴趣的可以进去看看或者动动你们勤劳的双手点个关注哟 作者在此谢谢大家了。
1、佩奇网（微信小程序）：一个IT技术社区，对大家很有帮助的，都有超前的技术分享

2、江小鱼（公众号）：一个分享程序人生或者经验哲理的公众号

3、网站：暂时还没想好放什么，不过后续想好会放上去