用fetch模拟请求

最新推荐文章于 2024-05-14 09:54:10 发布

gunsmoke

最新推荐文章于 2024-05-14 09:54:10 发布

阅读量253

点赞数

分类专栏： vue学习

本文链接：https://blog.csdn.net/gunsmoke/article/details/106107973

版权

vue学习专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="main">
        <button @click="getData()">获取数据</button>
        <ul>
            <li v-for="data in dataList">{{data}}</li>
        </ul>
    </div>

    <script>
        new Vue({
            el: '#main',
            data: {
                dataList: []
            },
            methods: {
                getData() {
                    fetch("../json/test.json").then(res => res.json()).then(res => this.dataList = res)
                }
            }
        })
    </script>

</body>
</html>

test.json

[
  {"name": "aaa","age": 20},
  {"name": "bbb","age": 30},
  {"name": "ccc","age": 40}
]

效果

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

gunsmoke

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

使用React hooks结合fetch中止请求的方法探讨

weixin_40774527的博客

03-28

901

最近在公司尝试使用React hooks结合fetch请求进行项目开发遇到了两个问题：① 用户频繁切换界面上的 5 个维度按钮，由于网络响应过慢导致最新的请求数据被之前的请求结果覆盖。② 路由切换导致 unmount 页面的数据还在请求并更新 state 导致内存泄漏的现象。下面围绕这两个问题展开分析：一、思路问一思路就是在发送最新请求的同时abort过时的请求，或者我们可以抛弃过时请求...

Fetch 请求的超时设置与终止请求

HZ___ZH的博客

08-30

1432

要求 fetch 请求,3秒超时输出超时,不管成功与否,成功输出成功,失败输出失败。考察实现：Fetch 请求的超时设置与终止请求解决在使用XMLHttpRequest可以设置请求超时时间，可是转用Fetch后，超时时间设置不见了,在网络不可靠的情况下，超时设置往往很有用 ES6以后Promise 出现解决地狱回调等不优雅的代码风格。个人理解这个更像是一个生产者和消费者的关系，查看 Promise文档，有以下两个方法 Promise.race([promise1,promise2]) 传入多个Prom

参与评论您还未登录，请先登录后发表或查看评论

fetch-mock：模拟使用fetch发出的http请求

02-21

取笑模拟使用发出的http请求。功能包括：模拟大多数提取API规范，甚至模拟高级行为，例如流和中止 http请求的大多数方面的声明式匹配，包括url，标头，正文和查询参数最常用功能的简写形式，例如匹配http方法或仅匹配一个访存支持延迟响应，或使用您自己的异步函数定义自定义竞争条件可以用作监视真实网络请求的间谍可以使用您自己的可重复使用的自定义匹配器进行扩展，这些匹配器可用于匹配访存调用和检查结果同构，并支持全局提取实例或本地所需的实例新建如果使用笑话，请尝试使用新的包装器。新 fetchMock . mock ( 'http://example.com' , 200 ) ; const res = await fetch ( 'http://example.com' ) ; assert ( res . ok ) ; fetchMock . restore (

前端利用原生fetch模拟请求接口

weixin_33860722的博客

02-22

574

#模拟请求接口 Get // fetch（url,method,headers）浏览器都支持第一个参数是url 第二个是方法第三个是头部信息（用户的令牌，没有不用写） fetch('http://uat.mg.kme.com/navigate/view?rminalId=999173249906806784&pcType=1', { method: 'get', ...

技能经验拓展——利用fetch模拟ajax请求mock数据

MRlaochen的博客

06-07

388

在实际开发过程中，后端的接口往往不能及时部署在开发环境，所以需要我们搞一些mock数据，并且模拟Ajax请求数据，我们可以用fetch的形式来模拟。第一步：在public文件夹下面创建一个json文件，在里面模拟写接口返回的data数据，如图所示或者第二步：在组件中要使用Ajax请求数据的地方，用fetch来模拟请求 //fetch里面直接是public里面你要请求的json文件名 fetch('/manlist.json') .then(response=>response.json())

推荐开源项目：Fetch-Mock —— 网络请求模拟神器

热门推荐

weichushun的专栏

02-21

3万+

转载：前后端数据交互(四)——fetch 请求详解 - 前端人 - 博客园 fetch 是 XMLHttpRequest 的升级版，使用js脚本发出网络请求，但是与 XMLHttpRequest 不同的是，fetch 方式使用 Promise，相比 XMLHttpRequest 更加简洁。所以我们告别XMLHttpRequest，引入 fetch 如何使用？一、fetch介绍 fetch() 是一个全局方法，提供一种简单，合理的方式跨网络获取资源。它的请求是基于 Promise 的，需要详细学习 P

图文并茂教你模拟302接口，实现js中axios,fetch遇到302状态码后跳转的多种方案axios,fetch成功响应拦截302

tangdou369098655的博客

12-03

3679

下面我将会手把手教你实现： - 如何使用多种方案实现前端代码+302后端接口实现页面跳转？ - fetch 发送GET 或者 POST请求如何处理 302？或者是说fetch 怎么才能拦截302? - Axios 响应拦截 302 状态码的方案有哪些？如何实现？

python中fetch_python – 请求有效,而URLFetch没有

weixin_33433067的博客

12-23

776

简而言之,您的问题是,在您的urlfetch示例中,您将访问令牌嵌入到请求正文中,并且由于您发出了一个GET请求 – 它无法携带任何请求正文 – 这些信息将被丢弃.为什么你的第一个片段有效？因为requests.get()接受了可选的params参数,意思是：“把这个字典我给你,将它的所有键/值对转换成query string并将它附加到主URL”所以,在窗帘后面,requests.get()正在...

fetch

lele的博客

05-07

264

与XMLHttpRequest(XHR)类似，fetch方法也会允许发送ajax请求，区别在于fetch 的API使用promise,更加简单易用。promise是一个对象，有三种状态 pending,resolve,rejectAJAX的实现方式function reqListenser(){var data = JSON.parse(this.responseText)console.log(...

js ES6 fetch 方法

青蛙king的博客

07-19

1万+

一、fetch 概述 fetch 是一种 HTTP 数据请求的方式，是 XMLHttpRequest 的一种替代方案。 fetch 不是 ajax 的进一步封装，没有使用 XMLHttpRequest对象。fetch 是原生 JavaScript。 fetch 与 ajax 的区别： fetch()返回的promise将不会拒绝http的错误状态，即使响应是一个HTTP 404或者500——当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reje

前端请求大比拼：Fetch、Axios、Ajax、XHR

dfc_dfc的博客

08-13

3060

前端请求大比拼：Fetch、Axios、Ajax、XHR

使用 Fetch

一路向前的博客

08-24

408

Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。这种功能以前是使用 XMLHttpRequest 实现的。Fetch 提供了一个更理想的替代方案，可以很容易地被其他技术使用，例如 Service Workers。Fetch 还提供了专门的逻辑空间来定义其他与 HTTP 相关的概念，例如 CORS 和 HTTP 的扩展。请注意，fe.

fetch请求理解和用法

Rain022111的博客

02-23

4184

接着我们调用Promise原型上的公有方法then(), then方法接收两个函数作为参数，第一个参数是 Promise 执行成功时的回调函数resolve，（resolve函数的参数就是Response 对象，所以要明白then方法中的res其实就是Response），第二个参数是 Promise 执行失败时的回调函数reject，两个函数只会有一个被调用。：fetch()发起请求以后，只有网络错误，或者无法连接时，fetch()才会报错，其他情况都认为请求成功。如果以后有需要补充的会继续回来写的。

Jest测试框架入门之匹配器与测试异步代码

qq_44318215的博客

04-08

595

一、匹配器 1、对于一般的数字与字符串类型使用 toBe test('adds 1 + 2 to equal 3', () => { expect(1 + 2).toBe(3); }); test('a + b to equal ab', () => { expect('a' + 'b').toBe('ab'); }); 2、对于对象与数组类型使用 toEqual // 数组项需一一对应 test('array is equal', () => { expect([1, 2

使用apipost模拟手机实现请求发送

weixin_44159454的博客

09-15

2284

一、apipost中有专门针对于模拟手机请求发送的参数首先我们新建一个接口，访问www.baidu.com然后点击发送然后我们在创建一个接口，这个是访问移动版的www.baidu.com不过这里需要设置一下头部参数user-agent 在选择参数值，这里apipost自己给我了两个参数值 Android版本：Mozilla/5.0 (Linux; U; Android 8.1.0; zh-cn; BLA-AL00 Build/HUAWEIBLA-AL00) Chrome/57.0.2987.132

前端打断点模拟请求超时

05-26

在前端中，我们可以通过以下步骤来模拟请求超时： 1. 在开发者工具中打开调试面板（一般是F12）。 2. 找到你要调试的代码所在的文件，并在该文件中设置断点。 3. 在断点处添加一个定时器，等待一段时间后再继续执行...