前言

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

步入正題

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

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

在首頁頁面，編寫兩個按鈕分別發(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)絡請求，OBJECT 是一個對象，其屬性有：
• url：開發(fā)者服務器接口地址
• 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ù)

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

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

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

封裝網(wǎng)絡請求

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

新建一個 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 等等相關(guān)的，都是一樣的，好了本文就先介紹到這里，下一篇我再來給大家寫一個項目(蘋果計算器)，給這個系列畫上一個句號。

End

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

文章來源地址http://www.zghlxwxcb.cn/news/detail-760464.html

到了這里，關(guān)于【UniApp】-uni-app-網(wǎng)絡請求的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！