微信小程序ES6方法Promise封装接口

为何要封装接口？

---

 

有小程序开发的经验者，相信对微信API Request很熟悉了。对接接口时，有大部分的开发者都是直接调用request方法，去请求后台接口并渲染数据。诚然，直接使用api发起请求对接接口开发速度是快的，可是，一旦对接的接口多了起来，这样简单，直接的方法出现了很多缺陷。

1. 难以维护。域名被换或者接口名被换，修改接口名得一个个文件找，而且可能不清楚有多少文件调用了需要修改的接口，导致效率低下
2. 难以管理。无法了解到底用了哪些接口，难于统一修改，除非一个个找出了，并其归纳
3. 代码重复。有些接口参数复用率很高，比如token、code…。调用接口总是要写上一两遍，验证是否登录也总是要带上

 

Promise封装接口

---

 

 

要是你不了解ES6 Promise，推荐看这个文档https://www.jianshu.com/p/063f7e490e9a

 

一、在utils文件夹创建base.js、https.js、ports.js三个js文件

base.js用于管理域名

https.js用于请求前的处理和请求后的处理

ports.js用于封装一个个接口

 

二、处理https.js，封装get和post请求，简单处理请求前后的问题

https.js:

//封装GET请求
function _get({url,data}){
   //为了用户体验，加一个loading效果

 

　　  wx.showLoading({title:'加载中',mask:true});

　　return new Promise((resolved,rejected)=>{
     const obj = {
       url,
       data,
       method:'GET',
       success:(res)=>res.statusCode===200?resolved(res.data):rejected(res.data),
       fail:(err)=>rejected(err),
　　　　complete:()=>{wx.hideLoading();}
     }
     wx.request(obj)
   })
   
}

//封装POST请求
function _post({url,data}){
   //为了用户体验，加一个loading效果

 

　　  wx.showLoading({title:'加载中',mask:true});

　　return new Promise((resolved,rejected)=>{
     const obj = {
       url,
       data,
       method:'POST',
       success:(res)=>res.statusCode===200?resolved(res.data):rejected(res.data),
       fail:(err)=>rejected(err),
　　　　complete:()=>{wx.hideLoading();}
     }
     wx.request(obj)
   })
   
}
//导出封装的_post方法
export default {
  _post,
  _get
}

 

三、在base.js中保存域名、接口

 base.js:

//域名
const testurl ='http://t.weather.sojson.com';
const base={
  /*测试接口*/
  test1:testurl+'/api/weather/city/101030100'
}
export default base;

 

三、准备封装一个个接口了，封装test1这个接口试试看

ports.js　　

 

import base from './base.js';
import https from './https.js';
const ajax={
  test1:()=>{
    return https._get({ url: base.test1})
  }
}
export default ajax;

　　

 四、将封装好的接口导入app.js，在App中实例化

五、调用下封装的接口，看看效果如何。随便在某一个页面onload中调用，调用代码如下：

　　 getApp().ports.test1().then((res)=>{
      console.log(res,'能否？');
    }).catch(()=>{console.error('出啥错了？');});　　

效果如下:

 

 六、还想再对接其它接口，常用域名存在base.js，封装接口存在ports.js中就行，好管理又有序，看着都舒服。

 

 

 

 源码：https://gitee.com/murenziwei/wx_ports