Vue接口调用（一）fetch用法

已于 2022-04-06 16:50:39 修改
阅读量9.1k 收藏 35
点赞数 6
分类专栏： Vue全家桶 文章标签： vue.js 交互 ajax
于 2022-04-04 17:40:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55990909/article/details/123957200
版权

Vue接口调用🔥

接口调用地址
Vue接口调用（一）fetch用法https://blog.csdn.net/m0_55990909/article/details/123957200
Vue接口调用（二）axios用法🔥https://blog.csdn.net/m0_55990909/article/details/123981283
Vue接口调用（三）async/await用法🔥https://blog.csdn.net/m0_55990909/article/details/123981292

✍目录总览：

1. fetch概述

基本特性

  • fetch是传统ajax的升级版本，是原生js
  • 更加简单的数据获取方式，功能更强大，更灵活，可以看作是xhr的升级版。
  • 基于Promise实现

语法结构

fetch(url).thne(fn2)
		 .thne(fn3)
		 ...
		 .then(fn)
2. fetch的基本用法
  • 第一个.then接收到的是Promise数据集
  • 需要被.then处理才可以看到 我们最终想要的数据。

//客户端请求
<body>
  <script type="text/javascript">
    //Fetch API 基本用法
    fetch('http://localhost:3000/fdata').then(function(data){
      // text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
      return data.text();
    }).then(function(data){
      console.log(data);
    })
  </script>
</body>

//服务器响应
app.get('/fdata', (req, res) => {
  res.send('Hello Fetch!')
})

3. fetch请求参数

常用配置选项：

  • method（String）：HTTP请求方法，默认为GET（GET、DELETE、POST、PUT）
  • body（String）：HTTP请求参数
  • headers（Object）：HTTP的请求头，默认为{}
3.1 get请求方式的参数传递
第一种方式
//客户端请求
<body>
  <script type="text/javascript">
  //GET参数传递-传统URL
    fetch('http://localhost:3000/books?id=123', {
      method: 'get'
    })
      .then(function(data){
        return data.text();
      }).then(function(data){
        console.log(data)
      });
  </script>
</body>

//服务器响应
app.get('/books', (req, res) => {
  res.send('传统的URL传递参数!' + req.query.id)
})

第二种方式（restful形式的url）
//客户端请求
<body>
  <script type="text/javascript">
  //GET参数传递 - restful形式的URL
    fetch('http://localhost:3000/books/456', {
      method: 'get'
    })
      .then(function (data) {
        return data.text();
      }).then(function (data) {
        console.log(data)
      });
  </script>
</body>

//服务器响应
app.get('/books/:id', (req, res) => {
  res.send('Restful形式的URL传递参数!' + req.params.id)
})

3.2 delete请求方式的参数传递
//客户端请求
<body>
  <script type="text/javascript">
    //DELETE请求方式参数传递
    fetch('http://localhost:3000/books/789', {
      method: 'delete'
    })
      .then(function (data) {
        return data.text();
      }).then(function (data) {
        console.log(data)
      });
  </script>
</body>

//服务器响应
app.delete('/books/:id', (req, res) => {
  res.send('DELETE请求传递参数!' + req.params.id)
})

3.3 post请求方式的参数传递
  • body用于向后台传递数据
  • headers请求头需要配置content-type内容类型（后面的值是固定的），才可以传过去
第一种方式

传递的是传统格式的参数

//客户端请求
<body>
  <script type="text/javascript">
    //POST请求传参
    fetch('http://localhost:3000/books', {
      method: 'post',
      body: 'uname=lisi&pwd=123',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    })
      .then(function (data) {
        return data.text();
      }).then(function (data) {
        console.log(data)
      });
  </script>
</body>

//服务器响应
app.post('/books', (req, res) => {
  res.send('POST请求传递参数!' + req.body.uname + '---' + req.body.pwd)
})

第二种方式

传递的是Json格式的参数

//客户端请求
<body>
  <script type="text/javascript">
    //POST请求传参
    fetch('http://localhost:3000/books', {
      method: 'post',
      body: JSON.stringify({
        uname: '张三',
        pwd: '456'
      }),
      headers: {
        'Content-Type': 'application/json'
      }
    })
      .then(function (data) {
        return data.text();
      }).then(function (data) {
        console.log(data)
      });
  </script>
</body>

//服务器响应
app.post('/books', (req, res) => {
  res.send('POST请求传递参数!' + req.body.uname + '---' + req.body.pwd)
})

  • 可以接受json格式参数的原因：有bodypaser中间键

3.4 put请求方式的参数传递
  • put请求方式的参数传递：一般提交的数据，用于修改原有数据
    • put也支持第一种 传递传统表单text形式的参数
    • json格式需要后台提供支撑，也就是bodyParser中间键
//客户端请求
<body>
  <script type="text/javascript">
    //PUT请求传参
    fetch('http://localhost:3000/books/123', {
      method: 'put',
      body: JSON.stringify({
        uname: '张三',
        pwd: '789'
      }),
      headers: {
        'Content-Type': 'application/json'
      }
    })
      .then(function (data) {
        return data.text();
      }).then(function (data) {
        console.log(data)
      });
  </script>
</body>

//服务器响应
app.put('/books/:id', (req, res) => {
  res.send('PUT请求传递参数!' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})

4. fetch响应结果
  • text()：将返回体处理成字符串类型
  • json()：返回结果和JSON.parse(responseText)一样
第一种方式text
//客户端请求
<body>
  <script type="text/javascript">
    //Fetch响应text数据格式
    fetch('http://localhost:3000/json').then(function(data){
      return data.text();
    }).then(function(data){
      var obj = JSON.parse(data);
      console.log(obj.uname,obj.age,obj.gender)
    })
  </script>
</body>

//服务器响应
app.get('/json', (req, res) => {
  res.json({
    uname: 'lisi',
    age: 13,
    gender: 'male'
  });
})
  • data类型为字符串，无法直接访问属性的值

处理方式（访问到具体属性值）：

1.使用JSON.parse()把字符串转化成对象
var obj = JSON.parse(data)
2.使用 obj.属性名 得到属性值
console.log(obj.uname)

第二种方式json
//客户端请求
<body>
  <script type="text/javascript">
    //Fetch响应json数据格式
    fetch('http://localhost:3000/json').then(function(data){
      return data.json();
    }).then(function(data){
      console.log(data.uname)
    })
  </script>
</body>

//服务器响应
app.get('/json', (req, res) => {
  res.json({
    uname: 'lisi',
    age: 13,
    gender: 'male'
  });
})

  • 返回的data是object对象，可以直接获取对象中属性的值 (data.属性名)

Armin444
关注
专栏目录
Vue 接口调用：fetch、axios、async、await
yexiangCSDN的专栏
05-28 280
一、fetch接口 1. fetch基本特性 Fetch API 提供了一个获取资源的接口（包括跨域请求）。任何使用过XMLHttpRequest的人都能轻松上手，而且新的 API 提供了更强大和灵活的功能集 更加简单的数据获取方式，功能更强大、更灵活，可以看做是xhr的升级版 （http协议） 基于Promise实现 fetch()必须接受一个参数——资源的路径。无论请求成功与否，它都返回一个 Promise 对象，resolve 对应请求的Response。你也可以传一个可选的第二个参...
Vue的fetch的概述和使用
weixin_46415852的博客
03-02 960
Fetch基本概念 Fetch 是一个现代的概念, 等同于 XMLHttpRequest。它提供了许多与XMLHttpRequest相同的功能。 Fetch 的核心在于对 HTTP 接口的抽象，包括 Request，Response，Headers，Body，以及用于初始化异步请求的 global fetch。得益于 JavaScript 实现的这些抽象好的 HTTP 模块，其他接口能够很方便的...
160623、理解 Promise 的工作原理
weixin_30698527的博客
06-29 320
Javascript 采用回调函数(callback)来处理异步编程。从同步编程到异步回调编程有一个适应的过程，但是如果出现多层回调嵌套，也就是我们常说的厄运的回调金字塔(Pyramid of Doom)，绝对是一种糟糕的编程体验。于是便有了 CommonJS 的 Promises/A 规范，用于解决回调金字塔问题。本文先介绍 Promises 相关规范，然后再通过解读一个迷你的 Promises...
fetch-retry 使用指南
最新发布
gitblog_00235的博客
09-16 506
fetch-retry 使用指南 fetch-retry Wrapper around `fetch` with sensible retrying defaults 项目地址: https://gitcode.com/gh_mi...
如何在Vue3中使用fetch实现数据请求？
有我更精彩的博客
06-09 3853
fetchVue3是Vue.js的最新版本，它引入了许多新的特性和优化，其中包括组合式API（Composition API），更快的渲染器，以及更小的打包体积。使用Vue3的组合式API，可以更灵活地组织和复用代码，从而提高开发效率。通过本文的讲解，相信你已经学会了如何在Vue3中使用fetch进行数据请求。在实际项目中，合理使用fetch可以大大简化数据请求和处理的流程，提高开发效率。同时，与Vue3的组合式API相结合，可以让代码更加模块化和易于维护。
Vue学习（三十五）——fetch的用法
云中、漫步的博客
10-14 1万+
文章目录一、fetch API 中的 HTTP 请求二、fetchAPI 中 响应格式 Fetch API是新的ajax解决方案 Fetch会返回Promise fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。- fetch(url, options).then(） <script type="text/javascript"> // Fetch API 基本用法 fetch(url).then() 第一个参数请求的路径 // Fe
vue项目中使用fetch的实现方法
12-09
fetch的由来和定义 fetch的由来      众所周知，传统 Ajax （指 XMLHttpRequest）是最早出现的发送异步请求技术，其核心是使用XMLHttpRequest对象。但是它也存在一些令人头疼的问题：XHR 是一个设计粗糙的 API，不符合关注分离的原则；配置和调用方式非常混乱，而且基于事件的异步模型写起来也没有现代的 Promise，generator/yield，async/await 友好。而Fetch 的出现就是为了解决 XHR 存在的问题。 fetch的定义和使用 MDN中的描述：   Fetch API 提供了一个获取资源的接口（包括跨域请求）。任何使用过 X
vue学习笔记-接口调用fetch用法
weixin_42349568的博客
08-29 2039
一，fetch概述 二，fetch基本用法 第一个then是fetch的一部分，返回一个promise对象，于是可以继续用then来处理返回的结果ret。 这段代码是服务器的代码： //这是在创建服务器，通过express，创建名为app的服务器 const express=require('express') const app=express() //为获取post参数 const bodyParser=require('body-parser') //拦截所有的请求，对post请求做出处理，把参数
详解vue中使用express+fetch获取本地json文件
10-19
在Express服务器中设置一个API接口，提供JSON数据，然后在Vue组件中使用Fetch API发送请求获取数据。这种方式对于本地开发和测试是非常方便的，同时也能帮助我们更好地理解和掌握前后端交互的基本原理。
详解VUE调用本地json的使用方法
11-28
总的来说，Vue调用本地JSON文件并不复杂，主要涉及两个步骤：一是将JSON文件放在`static`文件夹下，二是使用`axios`或者其他HTTP客户端库获取数据，并将数据绑定到Vue组件的属性上。这样，你就可以在Vue应用中灵活地...
vue fetch 网络请求
10-21
vue 开发时的使用 fetch 封装实现网络请求，利用回调函数来带回访问数据，实现控制于请求分离，降低解藕性。
基于axios封装fetch方法及调用实例
01-21
基础axios用法请看axios官网 //依赖于axios对私有ajax进行修改 import Qs from 'qs' import axios from 'axios' import router from 'router/index' import {errorPrompt, loading, closeLoading} from 'util/util' export const status = { SUCCESS: '100', NET_ERR: '101', // 网络连接异常，请稍候再试 BIZ_ERR: '103', // 业务请求异常 NO_AUTH: '104'
Vue 中的 Fetch 使用
在下魔王ii的博客
07-16 1147
废话不多说 ，直接上代码 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue component</title> <script src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script&g
vue项目中使用fetch开发
weixin_34209406的博客
04-25 1万+
fetch的由来和定义fetch的由来 众所周知，传统 Ajax （指 XMLHttpRequest）是最早出现的发送异步请求技术，其核心是使用XMLHttpRequest对象。但是它也存在一些令人头疼的问题：XHR 是一个设计粗糙的 API，不符合关注分离的原则；配置和调用方式非常混乱，而且基于事件的异步模型写起来也没有现代的 Promise，generator/yield，async...
【前端网络深潜行者】信息化人员必备知识&面试宝典：TCP连接中断，客户端突然“玩失踪”怎么办？
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
06-02 1181
TCP的坚固与前端的智慧相遇，让网络的不确定变得可控。你是否经历过更巧妙的重连策略，或是棘手的断连难题？欢迎在评论区分享你的故事，一起加固这座网络的桥，让前端之旅更加稳健。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，
fetch函数以及在vue中的应用
baidu_41601048的博客
10-26 1万+
fetch是新一代XMLHttpRequest的一种替代方案。无需安装其他库。可以在浏览器中直接提供其提供的api轻松与后台进行数据交互。 基本用法： 1 fetch（url，{parmas}）.then(res=&gt; return res.json() //返回promise对象 ).then(data=&gt;{ return data //返回真正数...
vue3项目实战中的接口调用方法（二）fetch用法 （前后端交互） get请求/post请求/put请求/delete请求
热门推荐
XSL_HR的博客
10-21 1万+
本期文章将重点介绍vue3的fetch方法实现请求接口
Vue使用fetch获取本地数据
qq_42498352的博客
09-06 774
4-2）启动命令 使用json-server --watch .\test2.json 访问文件；中间报错是json文件内容格式不对，修改一下。（2）安装插件 Preview on Web Server （使用Open with Live Server会有点小bug）如果遇到禁止运行脚本就用管理员身份设置 set-ExecutionPolicy RemoteSigned。4-1）安装工具 帮助创建接口 npm i json-server -g 允许跨域。test.json文件。
vue接口调用顺序执行
05-05
Vue 接口调用顺序执行的方式有多种，以下是其中的一些示例： 1. 使用 async/await 可以在 Vue 的 methods 中使用 async/...以上是几种常用的 Vue 接口调用顺序执行的方式，可以根据具体的需求选择适合自己的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值