vue3写hook函数封装axios请求时，请求的数据含有换行符，且不能转为正常的json格式

最新推荐文章于 2024-06-20 15:18:29 发布
最新推荐文章于 2024-06-20 15:18:29 发布
阅读量717 收藏 1
点赞数
分类专栏： vue 前端 typescript 文章标签： json 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58060036/article/details/124863202
版权
前端 同时被 3 个专栏收录
26 篇文章 0 订阅
订阅专栏
vue
16 篇文章 0 订阅
订阅专栏
typescript
4 篇文章 0 订阅
订阅专栏

前提：练习vue3的时候，写hook函数封装请求时，自己写的json文件模拟接口数据，请求的数据如下：

我测试了好久，什么replace、json转化数据啥的都用了全都没用，最后机缘巧合下发现了是json文件中的单引号问题，真是醉了，写的代码如下：

1、json文件模拟接口数据

2、hook函数封装axios请求

 

3、页面上发起请求

4、最后结果输出

 

事实证明，很小的细节会影响大局，哈哈哈

想把星星变成糖
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3中axios的封装
weixin_71333510的博客
12-01 749
axios的封装
vue axios封装 axios 请求
03-27
vue axios封装 axios 请求
axios请求JSON问题详解
qq_27008807的博客
01-01 1万+
当参数是JSON对象时，默认的Content-Type是application/json。axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function
【Vue3】如何封装一个超级好用的 Hook ！（2024-06-14）
hap1994的博客
06-14 1008
Vue3 官方文档是这样定义组合式函数的。，一个利用 Vue 的组合式 API 来封装和复用具有状态逻辑的函数。这个概念借鉴自 React 的 Hook。在 16.8 的版本中，React 引入了 React Hook。这是一项特别强大的技术，通过封装有状态的函数，极大提高了组件的编写效率和维护性。在下文中也是使用 Hook 来替代“组合式函数”进行叙述。在开发中，我们经常会发现一些可以重复利用的代码段，于是我们将其封装成函数以供调用。
自定义hook(前端配置代理)网络请求拦截(axios封装)vue3
liulang68的博客
03-09 435
https://www.bilibili.com/video/BV1nP4y1j7Mt?p=12
在vue中使用axios实现跨域请求并且设置返回的数据的格式是json格式，而不是jsonp格式
热门推荐
感恩、奋进、自信
05-16 2万+
在vue中使用axios实现跨域请求需求分析：在项目中需要抓取qq音乐的歌曲列表的数据，由于要请求数据的地址url=https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg。从qq音乐的官网上可以看到该请求的请求头中的referer中的域名是y.qq.com(发送请求页面的域名)，而host的域名是c.y.qq.com（被请求页面的域...
用encodeURIComponent 解决前端请求接口参数中特殊字段&在浏览器中变成换行符号，导致查询不出来数据的问题
m0_59157023的博客
06-12 910
最近发票我传参有&特殊字符 传给后端的时候发现本来是M&G 然后变成 M 换行 G。对需要编码的参数进行 用encodeURIComponent 进行编码。（只有由两个“代理”字符组成的字符会被编码为四个转义序列）。相比，此函数会编码更多的字符，包括 URI 语法的一部分。函数通过将特定字符的每个实例替换成代表字符的。编码的一个、两个、三个或四个转义序列来编码。
详解vue中axios请求的封装
10-17
最后，封装axios时，可以创建自定义的get和post方法，以简化调用： ```javascript export function get(url, params) { return axios.get(url, { params }); } export function post(url, data) { return axios....
Vue项目中如何使用Axios封装http请求详解
10-16
主要给大家介绍了关于Vue项目中如何使用Axios封装http请求的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue3+TS+axios+route+element plus 可二次开发的模板，包括请求使用方法，完美封装 上手即用
08-19
vue3+TS+axios+route+element plus 可二次开发的模板，包括请求使用方法，完美封装 上手即用
vue项目中axios请求网络接口封装的示例代码
10-17
在Vue项目中，使用axios进行网络接口的封装是提高代码复用性和可维护性的重要步骤。下面我们将详细探讨如何在Vue项目中实现axios的封装，以及封装get和post方法的具体步骤。 首先，我们需要创建一个新的JavaScript...
axios-hooks::duck:用于axios的React钩子
04-27
轴索钩 对React挂钩，具有对服务器端渲染的内置支持。 特征 您熟悉的所有 零配置，但需要时可配置 单行使用 与SSR一起使用时超级简单 安装 npm install axios axios-hooks axios是一个对等依赖项，需要显式安装 快速开始 import useAxios from 'axios-hooks' function App ( ) { const [ { data , loading , error } , refetch ] = useAxios ( 'https://reqres.in/api/users?delay=1' ) if ( loading ) return < p> Loading... < / p > if ( error ) return < p> Error! < / p > return (
Vue封装Axios请求和拦截器的步骤
10-14
Vue封装Axios请求和拦截器的目的是为了提高代码的可维护性和复用性，以及提供统一的错误处理机制。以下是对这个主题的详细说明： 首先，我们需要在项目中安装axios。如果使用的是Vue CLI 3，可以通过`npm install ...
vue中axios请求的封装实例代码
12-03
Vue官方推荐在项目中使用axios作为数据交互的工具。在实际开发中，封装axios可以帮助我们更好地管理和定制请求，比如根据不同的环境（开发、测试、生产）设置请求前缀，处理跨域问题，设置默认配置，以及实现请求和...
Vue简单封装axios之解决post请求后端接收不到参数问题
10-15
主要介绍了Vue简单封装axios之解决post请求后端接收不到参数问题,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
10-17
`axios.defaults.withCredentials = true` 这行代码是关键，它告诉axios在发起请求时携带当前的会话cookie。这样，当你在登录后设置了cookie，比如用户信息、会话ID等，这些信息将会被自动添加到Ajax请求的头部，供...
vue3 axios封装接口请求 useAxiosWithCancel hook
最新发布
weixin_51353891的博客
06-20 242
vue3 axios 终止请求hooks封装
vue3学习笔记（7）hook函数
gtd54789的博客
04-24 1227
Vue3专栏入口 本文按照需求分次级标题 一、 实现收集用户鼠标点击位置的hook函数 1.1 目录结构 2.2 useUserPosition.ts 代码还是比较简单的，这样就可以实现代码的复用 import { onBeforeUnmount, onMounted, ref } from "vue"; export default function () { const x = ref('') const y = ref('') // 鼠标点击操作函数回调 co
axios post请求数据，data如何转换为json的解决办法
weixin_42782745的博客
06-20 4370
我们现在来说说post请求常见的数据格式（content-type） Content-Type: application/json ： 请求体中的数据会以json字符串的形式发送到后端 Content-Type: application/x-www-form-urlencoded：请求体中的数据会以普通表单形式（键值对）发送到后端 Content-Type: multipart/form-data： 它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。 ..
vue3封装axios请求传参post
06-17
以下是一个简单的Vue 3中封装axios POST请求的例子： ```javascript // 引入axios库和Vue import axios from 'axios'; import { createApp } from 'vue'; // 创建axios实例并配置默认参数 const service = axios....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值