🤹♀️潜意识Java：个人主页
🎙座右铭：得之坦然，失之淡然。
💎擅长领域：大前端
是的，我需要您的：
🧡点赞❤️关注💙收藏💛
是我持续下去的动力！
目录
🧡一. 作者有话说
❤️
由于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>
编辑
🤹♀️潜意识Java：个人主页
🎙座右铭：得之坦然，失之淡然。
💎擅长领域：大前端
是的，我需要您的：
🧡点赞❤️关注💙收藏💛
是我持续下去的动力！
