微信小程序简单实现api封装

微信小程序简单实现api封装

今天学习了小程序里的api封装，然后在这里赶紧总结一下，以后忘了的话就可以看看，也算是对自己的一种总结！

思路

首先，新建一个http文件，然后再http文件里新建一个env.js文件来配置环境，
例如：代码如下

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

然后创建一个request.js文件，用哪个来封装网络模块需要的方法，功能等。
例如：代码如下

// request.js
const {
      baseUrl } = require('./env.js').prod
//封装ajax

//配置专属域名
const vipUrl = '小程序的专属域名'
/**
 * url:代表接口地址,
 * method:请求方式 GET | POST |..
 * data:代表要传递的参数
 * isSubDomain:是否添加专属域名
 */
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('wx.request打印结果：',res)
          if (res.statusCode === 200 && res.data.code === 0) {
     

            resolve(res.data)

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

        }
      })

    })

  }

}

紧接着创建一个index.js文件作为网络模块的接口文件，具体代码如下，
例如：

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

module.exports={
     
  //轮播图
  getBanner: () => request('banner/list','GET',{
     type:'index'},true),
  //分类接口
  getGoodsCate:() => request('shop/goods/category/all','GET','',true),
  //商品列表
  getGoodsList: () => request('shop/goods/list','POST',{
     },true),
}

最后呢就是在需要的页面来引入，然后就可以用了

//html.js
//引入封装api创建的http文件下面的index.js文件
const {
     getGoodsList}=require("../../http/index.js")
// 在这个生命周期里写
   /**
   * 生命周期函数--监听页面显示
   */
onShow: function () {
     
    getGoodsList().then((res)=>{
     
      console.log("哈哈哈",res)
    })
  },

上述呢，就是列举了几个例子，代码例子内容根据公司给的api来写！