vue fetch() get put post delete 方法的使用

最新推荐文章于 2024-04-29 16:21:44 发布
最新推荐文章于 2024-04-29 16:21:44 发布
阅读量915 收藏 4
点赞数 1
分类专栏： vue技术总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38192709/article/details/110097977
版权

fetch() get post put delete
1：get 方法：普通参数
在这里插入图片描述
2：get 方法的 restful 参数
在这里插入图片描述
3：delete 方法： 普通参数
在这里插入图片描述

4：delete 方法： restful 风格
在这里插入图片描述

5：post 方法 ： post 方法传参要加下面几句
const bodyParser = require(‘body-parser’)
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended: false}))

普通body 的普通传参方法
在这里插入图片描述

6：post 传参 JSON 格式

最低0.47元/天 解锁文章
叫我福建
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
fetch向后端请求数据：get/post/put/patch/delete方式、解决catch不能主动捕获错误问题（超详细笔记）
YY的博客
12-14 8735
fetch向后端请求数据：get/post/put/patch/delete方式、解决catch不能主动捕获错误问题（超详细笔记）
【前端】fetch和axios发送请求
weixin_51290060的博客
02-03 1658
axios和fetch向后端发送请求
如何将超链接（GET请求）转化为POST，PUT，DELETE请求
weixin_42543911的博客
03-24 3755
在SpringMVC中，编写REST风格的CRUD操作时，总共会用到四种请求，即GET，POST，PUT，DELETE。但是客户端浏览器只支持GET和POST两种i请求。因此要将POST请求转化为PUT和DELETE请求。而超链接本身是GET请求，因此首先要将GET请求转化为POST请求。 1.超链接GET转POST 首先需要引入jquery.min.js，将鼠标点击超链接的动作转化为把表单提...
VUE封装http.js get\del\put\post请求（一）
最新发布
weixin_45939316的博客
04-29 239
http.js直接复制粘贴即可使用 缩略很多内容 但不影响get\post\del\put请求 仅供参考。安装一下qs及axios： npm install axios | npm install qs。VUE封装http.js get\del\put\post请求。1.在src下创建文件夹utils,创建文件http.js。2.在src下创建cs.js。
Vue--前端交互 fetchAPI
dairen_j的博客
11-26 637
1. fetch基本使用 fetch 就是 ajax + Promise. 使用的方式和 jquery 提供的 $.ajax() 差不多 fetch默认是get请求 //基本用法 fetch('http://localhost:3000/data') .then(function (data) { //text() 方法属于fetchAPI的一部分，他返回一个Promise实例对象，用于获取后台返回的数据 ret
vue3项目实战中的接口调用方法（二）fetch用法 （前后端交互） get请求/post请求/put请求/delete请求
XSL_HR的博客
10-21 1万+
本期文章将重点介绍vue3的fetch方法实现请求接口
详解vue中使用express+fetch获取本地json文件
10-19
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE'); res.header('Access-Control-Allow-Headers', 'Content-Type'); res.header('Access-Control-Allow-Credentials','true'); next(); }; app...
Vue中 axios delete请求参数操作
10-14
本文将深入探讨在Vue中如何使用axios进行DELETE请求，并处理传递参数的方法。 首先，DELETE请求在axios中的用法与POST和PUT有所不同。POST和PUT请求通常包含三个参数：url、data和config。例如，你可以这样调用它们...
vue项目中axios使用详解
08-28
使用axios发送请求非常简单，我们可以使用get、post、put、delete等方法来发送请求。 import fetch from './fetch.js' fetch({ url: '/home/data', method: 'GET', params: { pageIndex: 1 } }) fetch({ ...
django做后台，vue做前台，亲测可以使用。
09-28
这些API通常采用HTTP协议，通过GET、POST、PUT、DELETE等方法进行数据操作，与Vue.js前端进行通信。 5. Vue-Django集成：Vue.js可以通过Axios或Fetch API调用Django后端提供的API。在Vue组件中，可以定义生命周期...
vue+axios实现文件下载及vue中使用axios的实例
10-17
下面将详细介绍如何使用 Vue 和 Axios 实现文件下载，以及在 Vue 项目中配置 Axios 的方法。 ### 文件下载流程 1. **接口准备**：首先，你需要与后端开发人员协调，确保他们提供的接口已经正确设置了响应头（`...
Vue中的fetch-post/get请求
YY的博客
11-23 1480
Vue中的fetch-post/get请求
fetch_put请求方式的参数传递
weixin_45630345的博客
08-09 1445
fetch('books/123',{ method:'put', body:JSON.stringify({ uname:'lisi', age:15 }) headers:{ 'Content-Type':'application/json', } }).then(data => { return data.text(); }).then(ret => { //这里才是得到的最终数据 console.log(ret); }) //后台接收参数为req.body.u
fetch_delete请求方式的参数传递
weixin_45630345的博客
08-09 1483
fetch('/abc/id=123',{ method:'delete' }).then(data => { return data.text(); }).then(ret => { //这里才是得到的最终数据 console.log(ret); }) //后台接收参数为req.params.id
接口调用Fetch方法以及fetch请求参数
热门推荐
Hiroshi's
12-18 1万+
fetch概述 看一个基本的例子： 服务端代码： app.get('/fdata',(req,res)=>{ setTimeout(function(){ res.send('this is content retrived by fetch method') },3000) }) 测试： <script> fetch('http://127.0.0.1:9999/fdata').then((data) => {
Vue接口调用（一）fetch用法
m0_55990909的博客
04-04 8588
✍目录总览： 1. fetch概述 基本特性 fetch是传统ajax的升级版本，是原生js 更加简单的数据获取方式，功能更强大，更灵活，可以看作是xhr的升级版。 基于Promise实现 语法结构 fetch(url).thne(fn2) .thne(fn3) ... .then(fn) 2. fetch的基本用法 第一个.then接收到的是Promise数据集 需要被.then处理才可以看到 我们最终想要的数据。 //客户端请求 <body> <sc
fetch_get请求方式的参数传递
weixin_45630345的博客
08-09 4441
传统的url参数写法： fetch('/abc?id=123').then(data => { //默认是get //得到的是一个promise对象，用于获取后台返回的数据 return data.text(); }).then(ret => { //这里才是得到的最终数据 console.log(ret); }) //后台接收参数为req.query.id Restful形式的url参数写法： fetch('/abc/id=123',{ method:'get' }).then(
fetch 之GET请求带参数
qq_43248623的博客
01-22 9437
fetch 之GET请求带参数
fetch使用整理
mjzhang1993的博客
06-01 1万+
fetch 使用1. 浏览器支持情况 fetch是相对较新的技术，当然就会存在浏览器兼容性的问题，当前各个浏览器低版本的情况下都是不被支持的，因此为了在所有主流浏览器中使用fetch 需要考虑 fetch 的 polyfill 了 require('es6-promise').polyfill(); require('isomorphic-fetch'); 引入这两个文件，就
vue2使用vue-request
04-15
Vue 2是一种流行的JavaScript框架，用于构建用户界面。Vue-Request是一个基于Vue的插件，用于处理HTTP请求。它提供了一种简单且灵活的方式来发送和处理HTTP请求。 要使用Vue-Request，首先需要安装它。可以通过npm或yarn来安装： ``` npm install vue-request ``` 或者 ``` yarn add vue-request ``` 安装完成后，在Vue应用程序的入口文件中引入并使用Vue-Request插件： ```javascript import Vue from 'vue'; import VueRequest from 'vue-request'; Vue.use(VueRequest); ``` 现在，你可以在Vue组件中使用`this.$request`来发送HTTP请求。例如，发送一个GET请求： ```javascript export default { methods: { fetchData() { this.$request.get('/api/data') .then(response => { // 处理响应数据 }) .catch(error => { // 处理错误 }); } } } ``` 除了GET请求，Vue-Request还支持POST、PUT、DELETE等其他HTTP方法。你可以使用`this.$request.post`、`this.$request.put`、`this.$request.delete`等方法来发送不同类型的请求。 此外，你还可以通过传递配置对象来自定义请求。例如，设置请求头、发送请求体等： ```javascript this.$request.post('/api/data', { data: 'example' }, { headers: { 'Content-Type': 'application/json' } }) ``` 这是关于Vue-Request的简单介绍，希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值