文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

(译) 如何使用 React hooks 获取 api 接口数据

原文地址：robinwieruch 全文使用意译，不是重要的我就没有翻译了 在本教程中，我想向你展示如何使用 state 和 effect 钩子在React中获取数据。...但是，这样就会出现了另一个问题：每一次的query 的字段变动都会触发搜索。如何提供一个按钮来触发请求呢？...在我们的例子中，数据，加载和错误状态的初始状态的参数没有改变，但它们已经聚合到一个由 reducer hook 而不是单个state hook 管理的状态对象。...毕竟，我们只有三个状态转换：初始化提取过程，通知成功的数据提取结果，并通知错误的数据提取结果。 在我们自定义的 hook 中，state 像以前一样返回。但是因为我们有一个状态对象而不是独立状态。...由于Axios Cancellation在我看来并不是最好的API，因此这个防止设置状态的布尔标志也能完成这项工作。 完

31.1K20

【React】1935- 来看看 SWR 如何用 React Hook 实现优雅请求

前言 如果你是一名经验丰富的 react 开发者，那么你肯定有遇到过以下几种情况： 请求库封装复杂，手动实现各种缓存验证去重逻辑，还需要维护请求加载或错误状态 由于组件的重复渲染导致的 重复请求 用户将网站长时间挂在后台导致缓存中的...当然封装的方式是五花八门的。 而在 SWR 中，它本身自带了 错误重试 的功能的，当出现请求错误时，SWR 使用 指数退避算法[3] 重发请求。...，而不是使用 hook 的方式获取，这种方式也可以用来实现预请求数据。...这里需要注意一下，在 React 官方文档中提到了 hooks-rules[4] ： 不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们...这个规则其实与上述的例子没有太大关联，React 文档中的规则是为了 避免 state 混乱，而上面的例子则是告诉大家 调用 useSWR 要尽量在同一个时机以避免重复请求 ，大家不要混淆了。

2K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    React学习笔记（三）—— 组件高级

    在 React 中， 始终是一个非受控组件，因为它的值只能由用户设置，而不能通过代码控制。...错误边界是用于捕获其子组件树 JavaScript 异常，记录错误并展示一个回退的 UI 的 React 组件，而不是整个组件树的异常。...回调函数） 服务端渲染 错误边界自身抛出来的错误 （而不是其子组件） 当render()函数出现问题时，componentDidCatch会捕获异常并处理 此时，render()函数里面发生错误，则...，componentWillMount会执行两次，一个在服务器端，一次在浏览器端，而componentDidMount能保证在任何情况下只会被调用一次，从而不会发送多余的数据请求。...服务器端使用Spring Boot： 接口提供JSON数据： http://localhost:8081/api/students  前后端分离，前端使用React+Axios从服务器获取数据，展示学生信息

    9.4K21

    前端异常的捕获与处理

    try { // 可能会导致错误的代码 } catch (error) { // 在错误发生时怎么处理 } 如果 try 块中的任何代码发生了错误，就会立即退出代码执行过程，然后执行 catch...} finally { return "做作业"; } return "睡觉"; } 表面上调用这个函数会返回 "出去玩"，因为返回 "出去玩" 的语句位于 try 语句块中，而执行此语句又不会出错...JS 代码错误 下面为我司内部错误监控平台一次日常报错的调用堆栈截图： 错误还是比较明显的，this 指向导致的问题。...因为 React 组件是声明性的，所以 try-catch 不是一个可靠的选项。为了弥补这一点，React 实现了所谓的错误边界。...(axios.js:1037) 可以看出来 axios 的异常可以当做 Promise 异常来处理： // 请求 axios.get("http://localhost:3000/api/uitest

    5.2K30

    axios

    2️⃣ 处理错误麻烦，只有网络错误才会reject(promise的api)，Http状态码404、500不会被标记为reject 3️⃣ 不支持取消一个请求以及查看请求的进度。...我们可以看到index.js中也并没有写具体代码，而是因我那个了lib下的axios 我们看一下 axios.js文件 可以看到我们的axios是通过createInstance创建的实例，在创建实例中...获取错误信息 在使用Promise的then() API的时候，我们是可以再通过catch API 获得错误异常的。那么 async await这种写法怎么获得错误异常呢？...// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL baseURL: 'https://some-domain.com/api/', // `transformRequest...request对应请求的request对象 配置默认值 全局的 axios 默认值 可以写到index.js中 axios.defaults.baseURL = 'https://api.example.com

    5.1K10

    如何解决前端常见的竞态问题

    简单来说，它出现的原因是无法保证异步操作的完成会按照他们开始时同样的顺序。 举个，有一个分页列表，我们快速地切换第二页，第三页。...所以我们在处理请求错误时，需要判断 error 是否是 cancel 导致的，与常规错误区分处理。...但是如果每次都需要手动调用，会导致项目中相同的模板代码过多，偶尔也可能忘记 cancel。 我们可以基于指令式 promise 封装一个自动忽略过期请求的高阶函数 onlyResolvesLast。...但是取消请求也依赖底层的请求 API，比如 XMLHttpRequest 需要用 abort，而 fetch API 和 axios 需要用 AbortController。...「忽略」更通用 而「忽略」的方式，不依赖请求的 API，更加通用，更容易抽象和封装。本质上所有的异步方法都可以使用 onlyResolvesLast 来忽略过期的调用。

    2.3K10

    万万没想到react请求数据花样如此之多

    接触react一个星期，也慢慢熟悉了一些概念，比如HOC(高阶组件)、jsx、函数式组件、HOOK，感觉react也没有别人说的学习曲线陡峭，难上手等等，给我的感觉，如果你会Vue，上手React真的会非常快...引入axios请求网络数据，将请求放入useEffect中 import React, { useState, useEffect } from 'react'; import axios from '...{ const result = await axios( 'https://hn.algolia.com/api/v1/search?...; return [{ data, isLoading, isError }, setUrl]; } 后面你知道了useReducer，你发现，loading，error这些状态应该交给他来做，而不是你通过...是不是和移动客户端开发灰常像，页面的destory的时候，如果网络请求的presenter还持有页面的context，那么页面将释放不掉，造成内存泄漏不说，还会导致在页面执行destory之后，网络数据回来

    1.6K81

    【React】945- 你真的用对 useEffect 了吗？

    通过使用这个 Hook，你可以告诉 React 组件需要在渲染后执行某些操作。React 会保存你传递的函数（我们将它称之为 “effect”），并且在执行 DOM 更新之后调用它。...Hook 使用了 JavaScript 的闭包机制，而不用在 JavaScript 已经提供了解决方案的情况下，还引入特定的 React API。 useEffect 会在每次渲染后都执行吗？...不仅会请求后端的数据，还会通过调用setData来更新本地的状态，这样会触发view的更新。...在我们的例子中，data，loading和error状态的初始值与useState创建时一致，但它们已经整合到一个由useReducer创建对象，而不是多个useState创建的状态。...在自定义hooks的末尾，state像以前一样返回，但是因为我们拿到的是一个状态对象，而不是以前那种分离的状态，所以需要将状态对象解构之后再返回。

    10.7K20

    前端系列第5集-Vue系列

    在Vue.js中， data 属性是一个函数而不是一个对象，因为每个组件都应该拥有自己独立的数据副本，而不是共享同一个数据对象。...如果一个已经存在的节点需要被移动到列表的另一个位置，Vue.js可以通过比较新旧节点的key值来判断是否需要移动这个节点，而不是销毁旧节点并重新创建一个新的节点。...但是，当数据源中的元素发生变化时，如果没有提供恰当的key值，可能会导致Vue.js出现性能问题，因为它可能会错误地重新渲染整个列表。...这可以通过递归遍历差异对象并调用相应的DOM API来完成。例如，我们可以编写一个名为"patch"的函数，该函数会根据差异对象更新实际的DOM树。...发送请求 调用Axios实例的request()方法或者get()、post()等快捷方法来发送HTTP请求。

    1K20

    React学习(九)-React中发送Ajax请求以及Mock数据

    撰文 | 川川 前言 在React中,render函数返回的结果,取决于组件的props和state 我们都知道UI页面上的数据不是写死的,往往是从后端的数据接口中拿到的 然后将真实的数据填充到页面上...= 'http://localhost:4000/api/goodlist'; // 这种方式是使用代理的方式,这里用的是mockoon工具 // this.baseUrl = 'https:...,webpack做了一些处理,react会自动的找到这个目录 方式二:使用浏览器内置的fetch方法 该方法是浏览器标准的一个接口,提供了一种简单合理的方式来跨网络异步的获取资源数据,现在也是越来越流行使用的...,与axios有些区别,不是用catch()去捕获错误,因为使用catch去捕获异常会掩盖掉组件本身可能产生的bug (error) => { console.log(error...是会报错的 换而言之,假数据放置在public目录下,不使用charles等其他代理工具，也能成功,因为在React中的webpack自动的帮你处理了,会自动的找到public目录下的文件 当然除了charles

    5.2K31

    React基础(9)-React中发送Ajax请求以及Mock数据

    image.png 前言 在React中,render函数返回的结果,取决于组件的props和state 我们都知道UI页面上的数据不是写死的,往往是从后端的数据接口中拿到的 然后将真实的数据填充到页面上...= 'http://localhost:4000/api/goodlist'; // 这种方式是使用代理的方式,这里用的是mockoon工具     // this.baseUrl = 'https:...,webpack做了一些处理,react会自动的找到这个目录 方式二:使用浏览器内置的fetch方法 该方法是浏览器标准的一个接口,提供了一种简单合理的方式来跨网络异步的获取资源数据,现在也是越来越流行使用的...,与axios有些区别,不是用catch()去捕获错误,因为使用catch去捕获异常会掩盖掉组件本身可能产生的bug      (error) => {         console.log(error...,假数据放置在public目录下,不使用charles等其他代理工具，也能成功,因为在React中的webpack自动的帮你处理了,会自动的找到public目录下的文件 当然除了charles还有mockoon

    2.8K30

    前端跨局域网访问后端API的常见问题与解决方案

    前端跨局域网访问后端API的常见问题与解决方案 引言 在现代Web开发中，前后端分离架构已成为主流。前端项目通常运行在浏览器中，而后端API服务则部署在服务器或本地开发机上。...然而，这时常常会遇到一个典型问题：前端调用后端API时，请求的IP地址变成了localhost，而不是预期的局域网IP，导致API请求失败。...本文将详细分析该问题的原因，并提供多种解决方案，包括动态配置API地址、使用环境变量、代理配置等最佳实践，帮助开发者轻松实现跨设备调试。...浏览器的同源策略（CORS） 如果后端未正确配置CORS（跨域资源共享），浏览器可能会阻止跨域请求，导致请求失败或重定向到localhost。 3....前端开发服务器代理未正确配置 如果使用Vue/React的开发服务器（如webpack-dev-server），可能需要代理API请求，否则会因跨域问题导致请求失败。

    47010

    Axios是什么？用在什么场景？如何使用？

    说到get、post，大家应该第一时间想到的就是Jquery吧，毕竟前几年Jquery比较火的时候，大家都在用他。但是由于Vue、React等框架的出现，Jquery也不是那么吃香了。...也正是Vue、React等框架的出现，促使了Axios轻量级库的出现，因为Vue等，不需要操作Dom，所以不需要引入Jquery.js了。 ?...// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL baseURL: 'https://some-domain.com/api/', // `transformRequest...// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/) paramsSerializer...https.Agent({ keepAlive: true }), // 'proxy' 定义代理服务器的主机名称和端口 // `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据

    5.5K10

    如何更好的在 react 中使用 axios 的拦截器

    我之前在 react 中处理 axios 的封装一直没有找到很好的方式，因为 axios 是非常独立，并且提供的各种 api 都是一次性配置，例如 axios.create、axios.defaults...你并不是那么容易就能在 axios 中随心使用 react，反之亦然。...但是 在 react 中，axios 并不是完全作为第三方工具，它的拦截器应该被定义为服务，即 react 中的副作用代码。...在 react 中活了过来，拦截器会实时把请求记录在 react 的上下文中，我们可以在 react 的任意地方调用日志上下文查看请求日志。...在默认页面 DefaultPage 组件中，我们可以进行一次错误的请求，请求会返回给我们 404 的状态码，现在我们需要在 axios 中进行拦截，当请求出现 404 时，跳转到 /404 页面。

    3.4K30

    一文掌握Axios：前后端数据交互竟如此简单

    方法发出了一个 GET 请求，访问https://api.example.com/users，然后通过.then() 获取成功的响应数据，通过.catch() 处理请求错误。...HTTP 请求，常见于 API 调用 返回值 提供then、catch、finally 方法 返回一个 Promise，可以直接调用这些方法 异常处理 通过catch 方法捕获 内置错误拦截器，可根据...axios 的主要功能与优势 自动解析响应数据：axios 会自动解析 JSON 响应，而使用 fetch 需要手动调用response.json()。...自动化处理：axios 提供请求和响应拦截器、错误处理、自动 JSON 解析等功能，适合对 HTTP 请求有大量需求的项目。...简单上手：使用 axios 发起请求更简单，可以直接获得解析后的数据并处理错误，而不需要额外的代码。 axios 让基于 Promise 的 HTTP 请求更强大和便捷，在实际开发中是非常常用的选择。

    1.9K20

    React 设计模式 0x6：数据获取

    Axios 是一个基于 Promise 的 node.js 和浏览器 HTTP 客户端。...GraphQL 提供了 API 中数据的完整且易于理解的描述，使客户端能够精确地请求所需的数据，避免了不必要的数据传输，使得 API 能够随着时间的推移更容易地发展，并提供了强大的开发者工具。...GraphQL 查询总是返回可预测的结果，使用 GraphQL 的应用程序速度快且稳定，因为它们控制获取的数据，而不是由服务器来控制。...# Memoization Memoization 是一种优化技术，主要用于通过存储昂贵的函数调用结果，并在再次出现相同输入时返回缓存的结果来优化计算机程序。...在 React 中，我们可以通过以下两种方式实现 Memoization： useMemo React 提供了一个内置的钩子函数 useMemo 允许您对耗费性能的函数进行记忆化，以避免在每次重新渲染时调用它们

    1.9K20

    【总结】2020- 前端常用的几种请求方式

    取消请求不够优雅：虽然 XMLHttpRequest 支持通过 abort 方法取消请求，但这并不是一个优雅的解决方案，因为它会导致请求被突然终止。...内置的错误处理：当网络请求出现问题时，Fetch API 会返回一个带有错误状态的 Promise，可以方便地使用 .catch() 方法进行处理。...错误处理不够直观：Fetch API 不会将 HTTP 状态码为 4xx 或 5xx 的响应视为错误，这意味着你需要在 .then() 方法中手动检查响应状态。...上传进度监控：Fetch API 不提供上传进度的监控，而 XMLHttpRequest 支持。 最佳使用场景：现代浏览器中，需要简洁语法和链式调用的场景。...客户端支持防御 XSRF：Axios 提供了防御 XSRF（跨站请求伪造）的功能。 错误处理：Axios 提供了统一的错误处理机制，当请求失败时，会在 .catch 中捕获到错误。

    93510
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券