**本篇内容
* 封装API模块
* 二次封装微信API为Promise的实现
API封装
-
目的
在前端项目开发中，将API进行封装，便于对接口进行统一管理。
-
API封装
（由于我接触的项目不多，参考之前做过的vue项目，对小程序的接口进行一个基础的封装）
1.封装请求为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.统一管理api
//interface.js
const api = 'https://xxx'
//获取评分榜前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
// })
// }
// })
}
})
总结
本篇学习了封装Api模块，便于对api进行后续的统一管理。
