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

曾经终败给现在 2023-06-16 04:53 7阅读 0赞

废话不多数 直接上代码：  
![在这里插入图片描述][20191124154540358.png]  
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
          // })
        })
      },

[20191124154540358.png]: https://img-blog.csdnimg.cn/20191124154540358.png