在微信小程序中封装api接口

一、创建一个文件夹api

在里面在创建一个env.js，request.js和 red_memorial.js

1、env.js

//设置公共访问url，即环境地址 
//commonJS写法--node采用就是该规范 引入require
module.exports={
  //开发环境
  dev:{
    baseUrl:"http://localhost:8080"
  },
  //测试环境
  test:{
    baseUrl:""
  },
  //线上url
  prod:{
    baseUrl:""
  }
} 

2、request.js

先要引入env中的url，在这里二次封装wx.request，拼接它需要拼接的参数

const {baseUrl}=require('./env.js').dev

// 专用域名
const subDomain='';
module.exports={
  // 二次封装wx.request 
  // {String }url:请求的接口地址 
  // {String} method:请求方式 GET,POST.... 
  // {Object} data:要传递的参数 
  // { boolean }isSubDomain:表示是否添加二级子域名 true代表添加,false代表不添加 
  
  //二次封装wx.request
  request:(url,method,data,isSubDomain)=>{
    return new Promise((resolve,reject)=>{
      console.log('这是封装的请求',baseUrl);
      // 拼接
      let _url=`${baseUrl}/${isSubDomain?subDomain:''}${url}`;
      // console.log(_url)
      wx.request({
        url:_url,
        data:data,
        method:method,
        header:{
          'content-type':' application/x-www-form-urlencoded'
        },
        success:res=>{
          // console.log('获取数据',res)
          // let {code}=res.data; 
          resolve(res.data)
        }
      })
    })
  }
}

3、在 red_memorial.js写它的数据请求

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

// 基于业务封装的数据请求
module.exports={

  //获取所有省份信息 
  findAllProvince:()=> { return request("/province/find_all","GET",{},false); },
  
  //根据名称获取景区信息
  findRedAreaByName:(name)=> { return request("/red_area/find_by_name","GET",{name},false); },
  
  //获取所有红色景区
  findAllRedMemorial:()=> { return request("/red_area/find_all","GET",{},false); },
 }

4、在页面的js中调用

1.引入上面封装好的api

2.在data中定义数组

provinceData: [], //省份数据

3.调用接口

    //获取省份数据
    const that = this
    findAllProvince().then(res=>{
        console.log(res)
        that.setData({
          provinceData: res.data,
          scenicInformation:  res.data[0].redAreaList
        })
    })

4.有参数的情况：