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

网络请求基本演练和封装

网络请求基本演练

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

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

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);
	}
})

思路一: 封装成类(封装成类具备更强的扩展性)

// 网络请求封装成类
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);
		})
	}
})