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

朱雀 2022-11-19 01:13 271阅读 0赞

### 文章目录 ###

*  一、创建一个文件夹api
 *   *  1、env.js
     *  2、request.js
     *  3、在 red\_memorial.js写它的数据请求
     *  4、在页面的js中调用
     *   *  1.引入上面封装好的api
         *  2.在data中定义数组
         *  3.调用接口
         *  4.有参数的情况：

# 一、创建一个文件夹api #

在里面在创建一个env.js，request.js和 red\_memorial.js

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70]

## 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 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 1]

### 2.在data中定义数组 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 2]

provinceData: [], //省份数据

### 3.调用接口 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 3]

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

### 4.有参数的情况： ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 5]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70]: /images/20221022/1386728bc73346f08e60e062748f09db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 1]: /images/20221022/188fbe8c93ca43c6802483996e6c5f18.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 2]: /images/20221022/c09fc35d2333496e81def992dd1730c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 3]: /images/20221022/cc576379e3f94d56a5a422a263e0cfe8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 4]: /images/20221022/e8ad62c9e96d4d6eb5533a0a5fac4999.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 5]: /images/20221022/3bf02ae7d4844291a74d457db686d6db.png