uniapp-网络数据请求全教程

🤹‍♀️潜意识起点：个人主页

🎙座右铭：得之坦然，失之淡然。

💎擅长领域：大前端

是的，我需要您的：

🧡点赞❤️关注💙收藏💛

是我持续下去的动力！

---

目录

🧡一. 作者有话说

 💜二. 下载第三方包

💚1.1 打开终端

🧡 1.2 在资源终端中打开

❤️1.3 执行命令  npm init -y 

 💜1.4 执行命令成功标志

🧡1.5 用命令下载安装包

💚三.  代码有关配置 

💜四. 发起请求 

🧡五. 总结网络请求的作用

---

🧡一. 作者有话说

❤️

由于un-iapp平台的限制，小程序项目中不支持axios,wx. request() API 功能较为简单，不支持拦截器等全局定制的功能。因此，建议在uni-app项目中使用第三方包发起网络数据请求。

❤️

---

🧡

uniapp都是通过下面步骤发起网络数据请求的，大家可以收藏好好学习。

🧡

---

💙

这里提供以下获取请求的官方文档，通过官方文档可以了解详细：官方文档。

💙

---

 💜二. 下载第三方包

💘要使用第三方包才可以更好的进行数据请求，因此，安装第三方包是第一步

💚1.1 打开终端

🧡 1.2 在资源终端中打开

🌐右键空白处，在终端打开，也可以cmd打开终端，都可以。如图所示。

 

❤️1.3 执行命令  npm init -y 

 💜1.4 执行命令成功标志

会多出一个文件

这样就说明执行成功了，我们重新打开终端执行下一步

🧡1.5 用命令下载安装包

npm install @escook/request-miniprogram

这个在官方文档中也有体现：官方文档

 

执行成功如上图。

💚三.  代码有关配置 

点开main.js进行配置 

里面配置好的代码下所示

import App from './App'
// 导入网络请求的包
import { $http } from '@escook/request-miniprogram'

uni.$http = $http
// 设置请求的基础路径，也叫根路径。
$http.baseUrl = 'https://api-hmugo-web.itheima.net'

//请求拦截器
$http.beforeRequest = function(option) {
	uni.showLoading({
		title: '加载中'
	})
}

//响应拦截器
$http.afterRequest = function(response) {
	uni.hideLoading()
}
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif

 下面是你们需要配置的，其他是默认的，不懂可以看注释。

这样的情况就是配好了 

💜四. 发起请求 

vue3代码

<template>
	<view>
		home
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//轮播图数据
				swiperList:[],
			};
		},
		//至于为什么要onLoad方法里获取请求的数据，因为在created方法里获取数据会导致页面闪烁，所以放在onLoad方法里，页面加载完成后再获取数据
		onLoad() {
			this.getSwiperList();
		},
		methods: {
		async getSwiperList() {
			const res = await uni.$http.get('/api/public/v1/home/swiperdata')
			console.log(res)
			//请求失败
			if(res.data.meta.status !== 200){
				return uni.showToast({
					title:'数据请求失败',
					duration:1500,
					icon:'none'
				})
			}
			}
		}
	}
</script>

<style lang="scss">

</style>

 

🧡五. 总结网络请求的作用

处理响应和错误，在发起网络请求时，需要妥善处理响应数据和可能出现的错误，以便进行相应的 UI 更新或错误处理。

---

取消请求，在 UniApp 中，可以通过维护一个请求引用的列表来取消未完成的请求，这对于防止内存泄漏和不必要的请求非常重要。

---

使用 UniApp 开发者工具或浏览器的开发者工具来监控和调试网络请求，确保请求和响应符合预期。

---

安全性，确保网络请求使用 HTTPS 协议，并对敏感数据进行加密处理，以保证数据传输的安全性。避免在主线程中执行耗时的网络请求操作，以免阻塞 UI 更新。考虑使用异步加载或懒加载策略。

---

跨域问题，处理好跨域请求问题，确保服务器端配置了合适的 CORS（跨源资源共享）策略。

---

🤹‍♀️潜意识起点：个人主页

🎙座右铭：得之坦然，失之淡然。

💎擅长领域：大前端

是的，我需要您的：

🧡点赞❤️关注💙收藏💛

是我持续下去的动力！