微信 小程序 请求数据接口 封装即使用 详细介绍

废话不多数 直接上代码：

config.js : 看自己域名是什么

const baseURL = 'http://123.207.32.32:8000';

export {
  baseURL
}

network.js:

import {
  baseURL
} from './config.js'

export default function(options) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: baseURL + options.url,
      method: options.method || 'get',
      data: options.data || {},
      success: resolve,
      fail: reject
    })
  })
}

home.js

//封装的好处就是接口如果太多 这样方便管理
import request from './network.js'

export function getMultiData() {
  return request({
  //url 填写自己要请求数据的路径
    url: '/recommend'
  })
}

export function getGoodsData(type, page) {
  return request({
    //url 填写自己要请求数据的路径
    url: '/home/data',
    data: {
      type,
      page
    }
  })
}

简单的封装基本就完事啦，那里需要请求接口就引入

import {
  getMultiData,
  getGoodsData
} from '../../service/home.js'

// 生命周期函数--监听页面加载 我这个接口现在坏了用不了 ，换成能用的就可以啦
 onLoad: function (options) {
   this._getMultidata()
  },
  _getMultidata() {
    getMultiData().then(res => {
    
      console.log(res)

      // const banners = res.data.data.banner.list;
      // const recommends = res.data.data.recommend.list;

      // // 将banners和recommends放到data中
      // this.setData({
      //   banners,
      //   recommends
      // })
    })
  },