微信小程序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