小程序学习笔记-7（封装API模块）

上一篇：小程序学习笔记-6：数据加载（接口）

**本篇内容
* 封装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进行后续的统一管理。

下一篇：小程序学习笔记-8：上拉加载（数据分页）