【小程序封装API的方法】

最新推荐文章于 2023-04-06 09:38:48 发布

原创最新推荐文章于 2023-04-06 09:38:48 发布 · 349 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #javascript #前端

本文介绍了一个小程序API封装的具体实现过程，包括环境配置、请求封装及常用接口的二次封装方法，提高了开发效率。

小程序封装API
首先创建一个js文件用来管理环境地址

module.export={
  //本地
  local:{
   // baseURL:'http://www.xxx.com'
  },
  //测试地址
  test:{
     // baseURL:'http://www.xxx.com
  },
  //线上环境地址
  prod:{
    baseURL:'https://api.xxx.cc'
  }
}

然后在创建一个js文件进行封装

const vip='LikeKK'  //专属域名
const {baseURL}=require('./env').prod
module.exports={

  //封装wx.request,不支持，所以咱们得用Promise包一层，让它支持Promise

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

    //url = 基地址baseURL  +  专属域名vip +业务接口url

    if(isSubDomain) {
      url=`${baseURL}/${vip}/${url}`
    }else {
      url=`${baseURL}/${url}`
    }
 
    

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

      //请求之前显示loading
      wx.showLoading({
        title: '玩命加载中。。。',
      })

      wx.request({
        url,
        method,
        data,
        header:{
          'content-type':'application/x-www-form-urlencoded'
        },
        success(res){
          //成功返回，隐藏loading
          wx.hideLoading()
          resolve(res.data)
        },
        fail(error) {
          reject(error)
        }
      })
	})
  },
}

基本封装完成，但是为了更加方便我们还可以进行二次封装

  const {request}=require('./request')
    
    
    //写各种接口封装方法
    module.exports={
    
       //封装轮播图接口
       getGoodsBanner(type='index') {
         return request('/banner/list','GET',{type})
       },
    
   //封装商品分类接口 例
       getGoodsCate() {},
       //封装商品列表接口
       getGoodsList() {}
    }