前言

• 經(jīng)過上個(gè)章節(jié)的介紹，大家可以了解到 uni-app-pinia存儲(chǔ)數(shù)據(jù)的基本使用方法
• 那本章節(jié)來給大家介紹一下 uni-app-網(wǎng)絡(luò)請求 的基本使用方法

步入正題

• 首先我們打開官方文檔，我先帶著大家看一下官方文檔的介紹：https://uniapp.dcloud.net.cn/api/request/request.html
• 從官方文檔中我們可以看到，可以通過 uni.request(OBJECT) 來發(fā)起網(wǎng)絡(luò)請求

好，那么廢話不多說，我們直接來看一下代碼，搭建一個(gè)普通模板的項(xiàng)目，自行去搭建，大家都有相關(guān)的經(jīng)驗(yàn)了，我就不多說了。

在首頁頁面，編寫兩個(gè)按鈕分別發(fā)送 get 請求和 post 請求，代碼如下：

<template>
	<view>
		<button type="primary" @click="reqGetFn">發(fā)送Get請求</button>
		<button type="primary" @click="reqPostFn">發(fā)送Post請求</button>
	</view>
</template>

<script setup>
	function reqGetFn() {
		uni.request({
			url: 'https://jsonplaceholder.typicode.com/posts',
			data: {
				text: 'BNTang'
			},
			method: "GET",
			header: {
				// 自定義請求頭信息
				'custom-header': 'hello'
			},
			success: (res) => {
				console.log(res);
				console.log(res.data);
			}
		});
	}

	function reqPostFn() {
		uni.request({
			url: 'https://jsonplaceholder.typicode.com/posts',
			data: {
				text: 'BNTang'
			},
			method: "POST",
			header: {
				// 自定義請求頭信息
				'custom-header': 'hello'
			},
			success: (res) => {
				console.log(res);
				console.log(res.data);
			}
		});
	}
</script>

• 代碼中，通過 uni.request(OBJECT) 來發(fā)起網(wǎng)絡(luò)請求，OBJECT 是一個(gè)對(duì)象，其屬性有：
• url：開發(fā)者服務(wù)器接口地址
• data：請求的參數(shù)
• method：請求方法，有效值：GET，POST，PUT，DELETE，CONNECT，HEAD，OPTIONS，TRACE，UPLOAD，比較常用的是 GET 和 POST
• header：自定義請求頭信息
• success：接口調(diào)用成功的回調(diào)函數(shù)
• fail：接口調(diào)用失敗的回調(diào)函數(shù)

好，我們來運(yùn)行一下，看一下效果：

通過如上的示例，我覺得大家唯一有疑問的可能就是這個(gè)請求地址了，這個(gè)請求地址是我在網(wǎng)上搜索的一個(gè)在線的接口，可以用于測試學(xué)習(xí)使用：

我這里使用的是 JSON Placeholder：https://jsonplaceholder.typicode.com

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

• 通過如上的示例，我們可以看到，通過 uni.request(OBJECT) 來發(fā)起網(wǎng)絡(luò)請求，是非常簡單的，只需要傳入相關(guān)的參數(shù)即可
• 但是，我們在實(shí)際開發(fā)中，肯定是需要封裝一下的，這樣才能更好的使用，那么我們來封裝一下

新建一個(gè) tools 文件夾，然后在 tools 文件夾下新建一個(gè) network.js 文件，代碼如下：

class ITRequest{
	request(url, method, data){
		return new Promise((resolve, reject)=>{
			uni.request({
				url: url,
				method: method,
				data: data,
				timeout: 3000,
				success: function(res){
					resolve(res.data);
				},
				fail: function(err){
					reject(err);
				}
			})
		})
	}
	get(url, data){
		this.request(url, "GET", data);
	},
	post(url, data){
		this.request(url, "POST", data);
	},
}

export default new ITRequest();

我封裝好了，大家直接用即可非常的簡單，因?yàn)樵谥拔乙卜庋b過對(duì)應(yīng)原生的與 axios 等等相關(guān)的，都是一樣的，好了本文就先介紹到這里，下一篇我再來給大家寫一個(gè)項(xiàng)目(蘋果計(jì)算器)，給這個(gè)系列畫上一個(gè)句號(hào)。

End

• 如果你有任何問題或建議，歡迎在下方留言，我會(huì)盡快回復(fù)
• 如果你覺得本文對(duì)你有幫助，歡迎點(diǎn)贊、收藏，你的支持是我寫作的最大動(dòng)力

總結(jié)

以上是生活随笔為你收集整理的【UniApp】-uni-app-网络请求的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。