【小程序】网络请求API介绍及网络请求的封装

这篇具有很好参考价值的文章主要介绍了【小程序】网络请求API介绍及网络请求的封装。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

网络请求基本演练和封装

网络请求基本演练

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

属性 类型 默认值 必填 说明
url string 开发者服务器接口地址
data string/object/ArrayBuffer 请求的参数
header Object 设置请求的 header,header 中不能设置 Referer。 content-type 默认为 application/json
timeout number 超时时间,单位为毫秒。默认值为 60000
method string GET HTTP 请求方法
dataType string json 返回的数据格式
responseType string text 响应的数据类型

上面众多属性中比较关键的几个属性如下:

url: 必传, 不然请求什么.

data: 请求参数

method: 请求的方式

success: 成功时的回调

fail: 失败时的回调

网络请求API基本演练

一般我们都是在页面的onLoad生命周期中发送网络请求

直接通过wx.request(Object object)发送无参数GET请求:

Page({
	data: {
		allCities: {}
	},
  // onLoad生命周期发送网络请求
	onLoad() {
		wx.request({
			// 发送网络请求的地址
			url: "http://123.207.32.32:1888/api/city/all",
			// 拿到请求的结果
			success: (res) => {
				// 将获取的结果保存到data中
				const data = res.data.data
				this.setData({
					allCities: data
				})
			},
			// 拿到错误信息
			fail: (err) => {
				console.log(err);
			}
		})
	}
})

直接通过wx.request(Object object)发送有参数GET请求:

Page({
	onLoad() {
		wx.request({
			url: 'http://123.207.32.32:1888/api/home/houselist',
			// 无论是POST请求还是GET请求, 参数都是在data中传递
			data: {
				page: 1
			},
			success: (res) => {
				console.log(res);
			},
			fail: (err) =>{
				console.log(err);
			}
		})
	}
})

网络请求配置域名

每个微信小程序需要事先设置通讯域名,小程序只可以跟指定的域名进行网络通信

小程序登录后台 – 开发管理 – 开发设置 – 服务器域名;

服务器域名请在 「小程序后台 - 开发 - 开发设置 - 服务器域名」 中进行配置,配置时需要注意

域名只支持 https (wx.request、 wx.uploadFile、 wx.downloadFile) 和 wss (wx.connectSocket) 协议;

域名不能使用 IP 地址(小程序的局域网 IP 除外)或 localhost;

可以配置端口,如 https://myserver.com:8080,但是配置后只能向 https://myserver.com:8080 发起请求。如果向https://myserver.com、 https://myserver.com:9091 等 URL 请求则会失败。

如果不配置端口。如 https://myserver.com,那么请求的 URL 中也不能包含端口,甚至是默认的 443 端口也不可以。如果 向 https://myserver.com:443 请求则会失败。

域名必须经过 ICP 备案;

出于安全考虑, api.weixin.qq.com 不能被配置为服务器域名,相关 API 也不能在小程序内调用。 开发者应将 AppSecret 保存到后台服务器中,通过服务器使用 getAccessToken 接口获取 access_token,并调用相关 API;

不支持配置父域名,使用子域名。


网络请求的封装

小程序提供的网络请求用起来是很繁琐的, 并且容易产生回调地狱, 因此我们通常会对小程序的网络请求进行封装

封装网络请求有两个思路:

思路一: 封装成一个函数

export function yqRequest(options) {
	return new Promise((resolve, reject) => {
		wx.request({ 
			...options,
			success: (res) => {
				resolve()
			},
			fail: reject
		 })
	})
}
  • 这样我们发送网络请求就可以使用该函数, 使用该函数发送网络请求就可以通过Promise或者async和await获取结果
import { yqRequest } from "../../service/index"

Page({
	onLoad() {
		// 通过Promise获取结果
		yqRequest({
			url: "http://123.207.32.32:1888/api/city/all"
		}).then(res => {
			console.log(res);
		})

		yqRequest({
			url: 'http://123.207.32.32:1888/api/home/houselist',
			data: {
				page: 1
			}
		}).then(res => {
			console.log(res);
		})
	}
})
import { yqRequest } from "../../service/index"

Page({
	onLoad() {
		// 此处调用封装的异步函数
		this.getCityData()
		this.getHouseListData()
	},

	// 使用async和await获取结果, 为了防止同步最好再封装成独立方法
	async getCityData() {
		const cityData = await yqRequest({
			url: "http://123.207.32.32:1888/api/city/all"
		})
		console.log(cityData);
	},
	async getHouseListData() {
		const houseListData = await yqRequest({
			url: 'http://123.207.32.32:1888/api/home/houselist',
			data: {
				page: 1
			}
		})
		console.log(houseListData);
	}
})

思路一: 封装成类(封装成类具备更强的扩展性)文章来源地址https://www.toymoban.com/news/detail-408148.html

// 网络请求封装成类
class YQRequest {
	// 传入配置的baseurl
	constructor(baseUrl) {
		this.baseUrl = baseUrl
	}

	request(options) {
		const { url } = options
		return new Promise((resolve, reject) => {
			wx.request({ 
				...options,
				url: this.baseUrl + url,
				success: (res) => {
					resolve(res)
				},
				fail: reject
			})
		})
	}

	get(options) {
		return this.request({ ...options, method: "get" })
	}

	post(options) {
		return this.request({ ...options, method: "post" })
	}
}

export const yqRequest = new YQRequest("http://123.207.32.32:1888/api")
  • 使用类的实例发送网络请求同样可以通过Promise或者async和await获取结果(这里不再演示async和await了)
import { yqRequest } from "../../service/index"

Page({
	onLoad() {
		// 使用类的实例发送网络请求
		yqRequest.request({
			url: "/city/all"
		}).then(res => {
			console.log(res);
		})

		yqRequest.get({
			url: '/home/houselist',
			data: {
				page: 1
			}
		}).then(res => {
			console.log(res);
		})
	}
})

到了这里,关于【小程序】网络请求API介绍及网络请求的封装的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序基于Promise封装发起网络请求

         

    2024年02月17日
    浏览(54)
  • 微信小程序封装网络请求设置超时5min不生效

    背景: 开发微信小程序时,由于有些业务场景特殊,接口返回时间较长,因此使用flyio封装网络请求时将timeout设置为5min。 问题: 设置timeout为5min,发现请求时长超过1min后请求自动断开了。 解决方案: 除了在网络请求那设置,还需要在app.json中设置networkTimeout中的request属性

    2024年01月17日
    浏览(53)
  • uniapp封装一个网络请求的服务,包括拦截器,请求头等,适用于抖音小程序,各种小程序。

    今天用uniapp写抖音小程序的时候,发现抖音小程序不支持axios(也许是我不会玩哈),那使用uniapp提供的请求方式总是可以的,毕竟uniapp对于小程序的友好度那是真没的说呀。那每个请求都写一套请求代码也太麻烦了,封装一个服务吧。直接上代码,我们把下面这个文件叫做

    2024年02月07日
    浏览(45)
  • uniapp及微信小程序封装全局网络请求,弹框和hint提示

    今天分享一下uniapp项目的网络请求如何封装,不知道大家开发微信小程序项目是用什么开发工具,我个人更喜欢用uniapp,无论是从项目扩展方向还是开发效率来说,uniapp都是首选。 1:创建一个项目工具库,http.js 在vite.config.js文件中配置跨域 这样,一个全局网络请求工具就完

    2024年02月06日
    浏览(38)
  • uniapp微信小程序封装网络请求 @escook/request-miniprogram

    官网地址:https://www.npmjs.com/package/@escook/request-miniprogram 1、下载依赖 2、引入 把下面代码放到 main.js 3、发起请求 4、请求成功 可以看到请求成功了,并执行了登入成功的逻辑。 每次发起请求后,都要自己写if语句判断请求是否成功,非常麻烦。我们可以修改一下源码解决这个

    2024年02月10日
    浏览(44)
  • uniapp api请求接口 封装

    2024年02月12日
    浏览(48)
  • 09-微信小程序 网络请求API(实现轮播广告和简易的聊天窗口)

    09-微信小程序API网络请求(实现轮播广告和简易的聊天窗口) 做项目的开发,一定离不开网络相关的操作,小程序做的都是客户端,客户端请求服务端做一些交互。 微信小程序提供的API的方式,通过API的方式可以调用微信提供的强大的功能,以增强小程序的功能,如:网络请

    2024年02月11日
    浏览(41)
  • uniapp接口请求api封装,规范化调用

    封装规范和vue中的差不多,都是统一封装成一个request对象,然后在api.js里面调用。 先创建一个utils文件夹,然后里面创建一个request.js,代码如下: 在api文件夹中封装对应的index.js文件,然后导入request对象: 在对应的vue或者react中引入并调用:

    2024年02月08日
    浏览(41)
  • UniApp实现API接口封装与请求方法的设计与开发方法

    UniApp实现API接口封装与请求方法的设计与开发方法 导语:UniApp是一个基于Vue.js的跨平台开发框架,可以同时开发iOS、Android和H5应用。在UniApp中,实现API接口封装与请求方法的设计与开发是一个十分重要的部分。本文将介绍如何使用UniApp实现API接口封装与请求方法的设计与开发

    2024年02月15日
    浏览(37)
  • uni-app 使用uni.request封装发送api请求文档服务器请求导航守卫

    前言 刚刚接触uni-app时候想着直接使用axios发请求,可以发送成功但是请求头有点问题 后面发现教程都是使用@escookrequest-miniprogram三方包发送请求-(浏览器环境发送不了请求,不兼容) 为什么不直接用uni.request()发送请求,是因为每次请求都要写一次添加请求头不合理 后面

    2024年02月16日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包