轮播图 - 数据请求（微信小程序）

最新推荐文章于 2022-01-16 23:07:17 发布

原创

最新推荐文章于 2022-01-16 23:07:17 发布 · 3.1k 阅读

12 ·

CC 4.0 BY-SA版权

本文通过轮播图实例讲解微信小程序的网络请求，包括wx.request的基本使用、关键属性解析，以及如何通过Promise封装网络请求。详细阐述了从配置baseURL到封装request，再到在home.js中调用并获取数据的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在大部分项目中，轮播图都是必不可少的。接下来通过轮播图这一实例来学习微信小程序中的数据请求。

一、网络请求的学习

1. 基本使用

微信提供的专属的API接口，用于网络请求：wx.request(Object object)

官方文档：
https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

在这里插入图片描述

注意事项：
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html

2. 关键属性解析

url：必传（不然请求什么呢）
data：请求参数
method：请求的方式
succes：成功时的回调
fail：失败时的回调

3. 网络请求的三种基本方式 - 原生方式

在某一页面中的 .js文件中，onLoad属性中发送网络请求

（1）发送最简单的get请求

Page({
   
   
	onLoad:function (options){
   
   
		wx.request({
   
   
	      url: 'http://httpbin.org',
	      success:function(res){
   
     //回调函数
	        console.log(res)
	      }
	    })
	}
})

（2）get请求，并且携带参数

Page({
   
   
	onLoad:function (options){
   
   
	    wx.request({
   
   
	      url: 'http://123.207.32.32:8000/home/data',
	      data:{
   
   
	        type:'sell',
	        page:1
	      },
	      success:function(res){
   
   
	        console.log(res)
	      }
	    })
	}
})