微信小程序的接口封装

最新推荐文章于 2024-09-03 11:01:15 发布

小马的马~

最新推荐文章于 2024-09-03 11:01:15 发布

阅读量169

点赞数

本文链接：https://blog.youkuaiyun.com/halouKti/article/details/115531045

版权

本文介绍了如何在微信小程序中进行接口封装，通过新建http文件夹，创建env.js、request.js和api.js文件，实现对不同业务接口的统一管理和调用。在每个页面中简单引入api.js，即可方便地使用封装好的接口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.新建http文件夹
2.在http文件夹下新建env.js 代码如下：

//存放不同的环境地址
module.exports={
  //线上地址
  prod:{
    baseUrl:'https://api.it120.cc'
  }
}

3.在http文件夹下新建request.js 代码如下：

//wx.request进行二次封装
const {baseUrl}=require('./env').prod

module.exports={

  request:function(url,method="GET",data={},isSubDomain=true){
  
    const myUrl='mr'
    
    if(isSubDomain){
    
      url=`${baseUrl}/${myUrl}/${url}`
      
    }else{
    
      url=`${baseUrl}/${url}`
      
    }
    return new Promise((resolve,reject)=>{
    
      wx.request({
        url,
        method,
        data,
        header:{
          'Content-type':'application/x-www-form-urlencoded '
        },
        success(res){
          console.log(res);
          if(res.data.code===0){
            resolve(res.data.data)
          }
        },
        fail(err){
          reject(err)
        }
      })
    })
  }
}

4.在http文件夹下新建api.js用来统一管理不同的业务接口api

//引入request方法
const {request}=require('./request')

//统一管理不同的业务接口api
module.exports={
  //获取轮播图接口
  getBanner:()=>{
    return request('banner/list','GET',{type:'index'},true)
  }
}

5.在单页面引入api.js

// logs.js
const {getBanner}=require('../../http/api')

Page({
  data: {
  },
 onShow(){
   getBanner()//直接调用即可
 }
})