前言

• 經過上個章節的介紹，大家可以瞭解到 uni-app-pinia存儲數據的基本使用方法
• 那本章節來給大家介紹一下 uni-app-網路請求 的基本使用方法

步入正題

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

好，那麼廢話不多說，我們直接來看一下代碼，搭建一個普通模板的項目，自行去搭建，大家都有相關的經驗了，我就不多說了。

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

<template>
	<view>
		<button type="primary" @click="reqGetFn">發送Get請求</button>
		<button type="primary" @click="reqPostFn">發送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) 來發起網路請求，OBJECT 是一個對象，其屬性有：
• url：開發者伺服器介面地址
• data：請求的參數
• method：請求方法，有效值：GET，POST，PUT，DELETE，CONNECT，HEAD，OPTIONS，TRACE，UPLOAD，比較常用的是 GET 和 POST
• header：自定義請求頭信息
• success：介面調用成功的回調函數
• fail：介面調用失敗的回調函數

好，我們來運行一下，看一下效果：

通過如上的示例，我覺得大家唯一有疑問的可能就是這個請求地址了，這個請求地址是我在網上搜索的一個線上的介面，可以用於測試學習使用：

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

封裝網路請求

• 通過如上的示例，我們可以看到，通過 uni.request(OBJECT) 來發起網路請求，是非常簡單的，只需要傳入相關的參數即可
• 但是，我們在實際開發中，肯定是需要封裝一下的，這樣才能更好的使用，那麼我們來封裝一下

新建一個 tools 文件夾，然後在 tools 文件夾下新建一個 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();

我封裝好了，大家直接用即可非常的簡單，因為在之前我也封裝過對應原生的與 axios 等等相關的，都是一樣的，好了本文就先介紹到這裡，下一篇我再來給大家寫一個項目(蘋果計算器)，給這個系列畫上一個句號。

End

• 如果你有任何問題或建議，歡迎在下方留言，我會儘快回覆
• 如果你覺得本文對你有幫助，歡迎點贊、收藏，你的支持是我寫作的最大動力