微信小程序封装网络请求

DukeMr.Lee

于 2021-11-24 18:01:38 发布

阅读量145

点赞数

文章标签： react.js vscode 前端

本文链接：https://blog.csdn.net/qq_43440532/article/details/121521406

版权

该示例展示了如何在独立的JS文件中定义一个名为`wx_request`的函数，该函数用于封装微信小程序的网络请求。通过这个函数，可以分别获取轮播图(getBanner)和按关键词搜索歌曲(getSong)的数据。然后在`recommend.js`页面中，导入并使用`getBanner`函数来获取并设置页面的轮播图数据。

摘要由CSDN通过智能技术生成

//在自己单独新建的js文件中
const baseUrl = 'http://localhost:8080'
function wx_request(path,params){
  return new Promise(resolve=>{
    wx.request({
        url: baseUrl+path,
        data:params,
        success:res=>{
            resolve(res.data) 
        }
      })
  }) 
}

const getBanner = ()=> wx_request('/banner/index/bannerList')
const getSong = params=> wx_request('/search/searchMusicBykeyWord',params)

export{
    getBanner,
    getSong
}

使用

// pages/recommend/recommend.js（ES6的引入）
import {getBanner} from '../../network/request'
Page({

    /**
     * 页面的初始数据
     */
    data: {
        banners:[],
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        // 请求轮播图数据
        getBanner().then(res=>{
            this.setData({banners:res.data})
        })
    }

})