網(wǎng)絡(luò)請(qǐng)求基本演練和封裝

網(wǎng)絡(luò)請(qǐng)求基本演練

微信提供了專屬的API接口,用于網(wǎng)絡(luò)請(qǐng)求: wx.request(Object object)

上面眾多屬性中比較關(guān)鍵的幾個(gè)屬性如下:

url: 必傳, 不然請(qǐng)求什么.

data: 請(qǐng)求參數(shù)

method: 請(qǐng)求的方式

success: 成功時(shí)的回調(diào)

fail: 失敗時(shí)的回調(diào)

網(wǎng)絡(luò)請(qǐng)求API基本演練

一般我們都是在頁(yè)面的onLoad生命周期中發(fā)送網(wǎng)絡(luò)請(qǐng)求

直接通過(guò)wx.request(Object object)發(fā)送無(wú)參數(shù)GET請(qǐng)求：

Page({
	data: {
		allCities: {}
	},
  // onLoad生命周期發(fā)送網(wǎng)絡(luò)請(qǐng)求
	onLoad() {
		wx.request({
			// 發(fā)送網(wǎng)絡(luò)請(qǐng)求的地址
			url: "http://123.207.32.32:1888/api/city/all",
			// 拿到請(qǐng)求的結(jié)果
			success: (res) => {
				// 將獲取的結(jié)果保存到data中
				const data = res.data.data
				this.setData({
					allCities: data
				})
			},
			// 拿到錯(cuò)誤信息
			fail: (err) => {
				console.log(err);
			}
		})
	}
})

直接通過(guò)wx.request(Object object)發(fā)送有參數(shù)GET請(qǐng)求：

Page({
	onLoad() {
		wx.request({
			url: 'http://123.207.32.32:1888/api/home/houselist',
			// 無(wú)論是POST請(qǐng)求還是GET請(qǐng)求, 參數(shù)都是在data中傳遞
			data: {
				page: 1
			},
			success: (res) => {
				console.log(res);
			},
			fail: (err) =>{
				console.log(err);
			}
		})
	}
})

網(wǎng)絡(luò)請(qǐng)求配置域名

每個(gè)微信小程序需要事先設(shè)置通訊域名，小程序只可以跟指定的域名進(jìn)行網(wǎng)絡(luò)通信。

小程序登錄后臺(tái) – 開發(fā)管理 – 開發(fā)設(shè)置 – 服務(wù)器域名；

服務(wù)器域名請(qǐng)?jiān)?「小程序后臺(tái) - 開發(fā) - 開發(fā)設(shè)置 - 服務(wù)器域名」 中進(jìn)行配置，配置時(shí)需要注意：

域名只支持 https (wx.request、 wx.uploadFile、 wx.downloadFile) 和 wss (wx.connectSocket) 協(xié)議；

域名不能使用 IP 地址（小程序的局域網(wǎng) IP 除外）或 localhost；

可以配置端口，如 https://myserver.com:8080，但是配置后只能向 https://myserver.com:8080 發(fā)起請(qǐng)求。如果向https://myserver.com、 https://myserver.com:9091 等 URL 請(qǐng)求則會(huì)失敗。

如果不配置端口。如 https://myserver.com，那么請(qǐng)求的 URL 中也不能包含端口，甚至是默認(rèn)的 443 端口也不可以。如果 向 https://myserver.com:443 請(qǐng)求則會(huì)失敗。

域名必須經(jīng)過(guò) ICP 備案；

出于安全考慮， api.weixin.qq.com 不能被配置為服務(wù)器域名，相關(guān) API 也不能在小程序內(nèi)調(diào)用。 開發(fā)者應(yīng)將 AppSecret 保存到后臺(tái)服務(wù)器中，通過(guò)服務(wù)器使用 getAccessToken 接口獲取 access_token，并調(diào)用相關(guān) API；

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

網(wǎng)絡(luò)請(qǐng)求的封裝

小程序提供的網(wǎng)絡(luò)請(qǐng)求用起來(lái)是很繁瑣的, 并且容易產(chǎn)生回調(diào)地獄, 因此我們通常會(huì)對(duì)小程序的網(wǎng)絡(luò)請(qǐng)求進(jìn)行封裝

封裝網(wǎng)絡(luò)請(qǐng)求有兩個(gè)思路:

思路一: 封裝成一個(gè)函數(shù)

export function yqRequest(options) {
	return new Promise((resolve, reject) => {
		wx.request({ 
			...options,
			success: (res) => {
				resolve()
			},
			fail: reject
		 })
	})
}

• 這樣我們發(fā)送網(wǎng)絡(luò)請(qǐng)求就可以使用該函數(shù), 使用該函數(shù)發(fā)送網(wǎng)絡(luò)請(qǐng)求就可以通過(guò)Promise或者async和await獲取結(jié)果

import { yqRequest } from "../../service/index"

Page({
	onLoad() {
		// 通過(guò)Promise獲取結(jié)果
		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() {
		// 此處調(diào)用封裝的異步函數(shù)
		this.getCityData()
		this.getHouseListData()
	},

	// 使用async和await獲取結(jié)果, 為了防止同步最好再封裝成獨(dú)立方法
	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);
	}
})

思路一: 封裝成類(封裝成類具備更強(qiáng)的擴(kuò)展性)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-408148.html

// 網(wǎng)絡(luò)請(qǐng)求封裝成類
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")

• 使用類的實(shí)例發(fā)送網(wǎng)絡(luò)請(qǐng)求同樣可以通過(guò)Promise或者async和await獲取結(jié)果(這里不再演示async和await了)

import { yqRequest } from "../../service/index"

Page({
	onLoad() {
		// 使用類的實(shí)例發(fā)送網(wǎng)絡(luò)請(qǐng)求
		yqRequest.request({
			url: "/city/all"
		}).then(res => {
			console.log(res);
		})

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

到了這里，關(guān)于【小程序】網(wǎng)絡(luò)請(qǐng)求API介紹及網(wǎng)絡(luò)請(qǐng)求的封裝的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！