微信小程序如何封装api接口

微信小程序如何封装api接口

首先创建个http文件夹（可自定义名字）

一：创建个env.js文件用来设置公共访问的url，即环境地址

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

二：二次封装 ajax请求，创建个request.js(自定义)

``

const {baseUrl} = require("./evt.js").prod    //引入url地址文件
const subDomain = "lsn"  //专属域名
module.exports = {   //二次封装
  //url:请求接口的地址//
  // methode:请求方式 GET POST
  //data:要传递的参数
  //isSubdomain:表示是否添加二级子域名
  request: (url, method = "POST", data = {}, isSubdomain) => {
    let _url = `${baseUrl}/${isSubdomain ? subDomain : " " }${url}`
    return new Promise((resolve, reject) => {
      wx.request({
        url: _url,
        data: data,
        method: method,
        header: {
          'content-type': ' 专用的请求头'
        },
        success: res => {
          let {code} = res.data
          if (code === 0) {
            resolve(res.data)
          } else {
            wx.showToast({
              title: '数据请求错误',
            })
          }

        }
      })
    })
  }
}

三：基于业务封装的数据请求，创建个api.js文件

const {request} = require("./request.js")  ////引入封装的request的请求

module.exports ={    //基于业务封装的数据请求
  goods_list:()=>{   //例如封装商品列表的方法
    return request("/shop/goods/list","POST",{},true)
  }
}

四：当前的页面引入，调用即可

const {goods_list} = require("../../http/api.js") 
//引用我们要调用的方法
/*** 生命周期函数--监听页面加载*/
  onLoad: function () {
    // 调用方法
    goods_list().then(res => {
      this.setData({
        goods_list: res.data
      })
    })
  },