【vue】详情页数据请求

已于 2022-04-02 09:39:31 修改
阅读量1.1k 收藏
点赞数
文章标签： vue vue.js javascript
于 2022-04-02 09:22:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45650440/article/details/123912348
版权
在Vue项目中，遇到详情页数据请求失败的问题，表现为log未打印并出现TypeError。报错信息提示request不是一个函数。通过分析报错信息，定位到detail.js的第3行。原因是request.js导出时未使用default，导致引入错误。解决方案是修正request.js的导出方式，确保在detail.js中正确引用。
摘要由CSDN通过智能技术生成

项目场景：

请求详情页数据

问题描述

请求不到，log没有打印
控制台报错
请添加图片描述

debugg过程

  1. 读报错信息

detail.js?c28a:3 Uncaught (in promise) TypeError: (0 , request__WEBPACK_IMPORTED_MODULE_0_.request) is not a function at getDetail (detail.js?c28a:3:1)

  1. 定位报错文件及代码行

detail.js?c28a:3:1

在这里插入图片描述

  1. 分析原因
最低0.47元/天 解锁文章
是炎炎哦（谁的小马甲）
关注
项目实战第八讲- 商品详情页数据比对+配件审核
Jet_qi的博客
05-17 247
在开发中 会遇到两个实体类DTO/POJO/VO相互比较其中数据是否有不同实体类中可能包含基础数据类型和List 思路 这时候需要自己写一个比较器 获取两个类 获取两个类中的get方法 通过反射提供invok方法执行两个类中的get方法获得数据比较 如果是List就递归比较List中的子对象 返回不同的数据集合 ......
Vue实战商城项目（六）—— 详情页数据请求
qq825871092的博客
10-28 909
文章目录前言一、页面的跳转与数据请求二、详情页顶部导航栏总结 前言 本篇开始详情页的要点讲解，概述：页面的跳转与数据请求，顶部导航栏封装 一、页面的跳转与数据请求 代码如下（示例）： 在network目录下重新封装一个detail页面的网络请求相关方法的js文件，获取detail的数据需要传入一个iid，这个iid每一个商品信息数据中都有。 找到goodsListItem，绑定点击事件，通过vue-router跳转到详情页并将商品的iid传入。这样我们就可以根据iid从detail页面中获取到相关的
vue接口数据进详情页
_小郑有点困了的博客
03-17 650
vue接口数据进详情页 1，接口写法 2，从接口拿到数据，遍历数据到页面 3，进入详情页，地址栏传id 3.1 3.2
vue 请求数据方式
qq_43344133的博客
05-20 6074
vue 请求数据方式 Vue 请求数据方式有：vue-resource、axios、fetchJsonp三种。其中，vue-resource 是 Vue官方提供的插件，axios 与 fetchJsonp 是第三方插件。 一、vue-resource 请求数据 npm 安装 vue-resource npm install vue-resource --save 说明：使用 --save 是...
imoport什么时候使用花括号{}？ Vue警告：export ‘axios‘ (imported as ‘axios‘) was not found in ‘axios‘
最新发布
Flywithdawn的博客
12-29 1040
页面运行时报错Uncaught TypeError: (0 , axios__WEBPACK_IMPORTED_MODULE_0__.axios) is not a function。原因：使用了import {axios} from 'axios’引入axios模块，改为import axios from 'axios’后正常。通过export方式导出，在导入时要加{ }，export default则不需要。带花括号使用，未将模块全部导入，使用时没有找到axios方法。
vue 列表页跳转详情页获取id以及详情页通过id获取数据
10-17
### Vue 列表页跳转详情页获取...需要注意的是，对于异步数据请求，应当进行适当的异常处理，比如在请求失败时进行提示，以提高用户体验。同时，路由的配置应保证路径与参数设置正确，避免在跳转过程中出现404等错误。
vue如何通过id从列表页跳转到对应的详情页
08-27
总结，Vue中从列表页跳转到详情页，主要涉及Vue Router的配置、动态路由参数的使用以及通过`this.$route.params`在详情页获取和处理数据。确保正确配置路由、传递必要的参数，并在详情页适当地处理这些参数，就可以...
Vue模拟数据,实现路由进入商品详情页面的示例
10-18
在这篇文章中，作者分享了一个使用...从路由配置到模拟数据的使用，再到通过HTTP请求与前端模板的交互，这些知识点共同构成了Vue项目中数据驱动视图更新的基本流程。希望这些内容可以为开发者提供实践上的参考和帮助。
Vue商城——详情页功能
yangsm的博客
06-21 9893
详情页实现思路 点击商品进去详情页，根据点击请求更加详细的信息，要传过来goodsItem的iid,根据id去服务器请求更加详细的信息；配置路由映射关系，点击进行跳转，带参数传递跳转 itemClick(){ this.$router.push('/detail/'+this.goodsItem.iid) /* this.$router.push({ ...
前端:proxy简单粗暴解决请求跨域问题
weixin_56335924的博客
11-25 603
前端:proxy简单粗暴解决请求跨域问题(vue2和vue3)
使用$dispatch接连栽两个跟头！！
华为开发者联盟
08-24 311
经过简单判断可以得出，是this在程序中发生了改变，导致dispatch在回调中时已经找不到，通过var that = this 深度复制，修改代码后，果然错误不一样了。看到这里恍然大悟，组件在发送通知前就已经被移除。既然已经知道问题就好改了，把hide触发放到dispatch后即可。经过几个小时的尝试最终在小伙伴的提醒下发现，尝试注释this.hide()，果然问题迎刃而解。子窗口实现调用media获取照片，并通过dispatch冒泡，传递给父窗口。父窗口通过：绑定函数接受数据并展示。
$dispatch弃用之后的事件监听
qq_44841678的博客
10-08 133
子组件，用$emit向，触发一个事件，向父组件传值。 addCart(event) { if (!event._constructed) { return } if (!this.food.count) { Vue.set(this.food, 'count', 1) // 通过Vue.set接口给food添加一个count属性，同时设值1 } else { this.food.cou
关于Nuxt.js中axios获取后端数据会报错的巨坑分析
eswang的CSDN博客
09-11 5134
搞了一个上午彷佛才弄懂是哪里的原因。 先说一下问题，很简单，就是axios得不到数据，各种各样的报错。开始我以为是因为第一次使用类似"async""await"等异步获取数据的方法的原因，但是一时又想不到怎么使用同步获取数据的办法验证，所以一直在查关于"asyncData"的使用方法，故而误入歧途。 看一下各种修改时报错的声明，美轮美奂 _nuxt_axios__WEBPACK_IMPOR...
Uncaught TypeError: (0,_request_WEBPACK_IMPORTED_MODULE_0__.default)is not afunction
lwj1372391870的博客
06-26 9830
模块暴露错误导致报错
WEBPACK_IMPORTED_MODULE_0___default.a is not a function
热门推荐
weixin_42524603的博客
03-24 1万+
检查 Webpack 打包类库时是否缺少 libraryTarget 参数，添加之后 Webpack 文件将会对外暴露 export default ，也就能够正常引入了
关于报错 vue__WEBPACK_IMPORTED_MODULE_0___default.a.observable is not a function
iijik55的博客
03-09 2875
报错截图如上，报了 vue__WEBPACK_IMPORTED_MODULE_0___default.a.observable is not a function 在 public 下 的 index.html里面，cdn 引入了版本太低导致的。 这个错误。因为我是 cdn 引入方式，所以 我想歪了，因为项目中 使用了 vue.observable ,这个 APi 是 vue 2.6 新增的，而我 引入的 cdn 版本是 2.5 所以 报了这个错误，所以只要 cdn 换个 版本 就 ok了 ...
网页url完整请求流程介绍
09-08 2561
浏览器做的第一步就是解析 URL 得到里面的参数。拆分访问协议(http/https)，获得服务器域名(),或得请求资源路径名(/userinfo/index.php)或得请求参数(username=nick)。将域名和需要请求的资源分离开来，从而了解需要请求的是哪个服务器，请求的是服务器上什么资源等等。
vant/vue ——列表跳转到指定详情页获取数据的方法
NanChen的博客
12-16 3705
在原有的列表项中添加点击事件 新建一个路由页面（detail.vue）并配置好路径 在 有列表的页面中添加方法，并通过this.$router.push进行传参 navClick(index) { this.$router.push({ path: "/detail", query: { detail: JSON.stringify(this.list[index]), }, }); }, .
Vue路由请求数据实现新闻列表及详情页的渲染
渣渣砖
03-02 5342
请求数据的接口： 新闻列表接口：http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1 新闻详情接口：http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=488 main.js中 /*定义路由 */ const r...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值