上一篇：小程序?qū)W習(xí)筆記-6：數(shù)據(jù)加載（接口）
**本篇內(nèi)容
* 封裝API模塊
* 二次封裝微信API為Promise的實(shí)現(xiàn)
API封裝
-
目的
在前端項(xiàng)目開發(fā)中访圃，將API進(jìn)行封裝，便于對(duì)接口進(jìn)行統(tǒng)一管理相嵌。
-
API封裝
（由于我接觸的項(xiàng)目不多腿时，參考之前做過的vue項(xiàng)目，對(duì)小程序的接口進(jìn)行一個(gè)基礎(chǔ)的封裝）
1.封裝請(qǐng)求為promise
//fetch.js
const Fetch = function(url, params){
return new Promise((resolve, reject)=>{
wx.request({
url: 'https://xxx',
data: Object.assign({}, params),
success: resolve,
fail: reject
})
})
}
module.exports = Fetch;
2.統(tǒng)一管理api
//interface.js
const api = 'https://xxx'
//獲取評(píng)分榜前250名
export const TOP250 = api + '/top250';
//其他api
...
3.封裝api
//api/movie.js
import Fetch from '../utils/fetch'
import TOP250 from '../interface'
export default {
getTop250(data, cb){
Fetch(TOP250, data).then(res=>{
cb(res)
})
},
//其他接口
...
}
4.使用
//pages/board/board.js
import Movie from '../../api/movie'
Page({
data: {
nbTitle: '榜單',
top250:[]
},
onLoad() {
this.setData({
nbLoading: true,
})
},
onLoad:function(){
let _this = this;
Movie.getTop250({}, (res)=>{
// console.log('https://xxx/top250',res);
_this.setData({
top250: res.subjects
})
})
// wx.request({
// url: 'https://xxx/top250',
// success:function(res){
// console.log('https://xxx/top250',res);
// _this.setData({
// top250: res.subjects
// })
// }
// })
}
})
總結(jié)
本篇學(xué)習(xí)了封裝Api模塊饭宾，便于對(duì)api進(jìn)行后續(xù)的統(tǒng)一管理批糟。
