首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

操作检查不触发createAsyncThunk内部的fetch API调用

是指在使用Redux Toolkit中的createAsyncThunk函数时,当进行操作检查时,并不会触发createAsyncThunk内部定义的fetch API调用。

在Redux Toolkit中,createAsyncThunk函数用于创建异步的thunk action,它可以方便地处理异步操作,并自动处理请求的开始、成功和失败等状态。在使用createAsyncThunk时,可以通过payloadCreator参数定义一个返回Promise的函数,该函数可以包含异步操作,例如使用fetch API进行网络请求。

然而,有时候我们可能需要在触发异步操作之前进行一些操作检查,例如检查用户权限、验证输入等。在这种情况下,我们可以在createAsyncThunk的第一个参数中定义一个操作检查函数,该函数可以在异步操作之前被调用,并且可以返回一个布尔值来指示是否继续执行异步操作。

如果操作检查函数返回false,则createAsyncThunk不会继续执行内部的fetch API调用,而是直接返回一个rejected状态的thunk action,可以通过action.payload.error属性获取错误信息。

以下是一个示例代码:

代码语言:txt
复制
import { createAsyncThunk } from '@reduxjs/toolkit';

// 操作检查函数
const operationCheck = (arg) => {
  // 进行操作检查,例如检查用户权限
  if (!arg.hasPermission) {
    return false;
  }
  return true;
};

// 异步操作函数
const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
};

// 创建异步thunk action
export const fetchDataAsync = createAsyncThunk(
  'data/fetch',
  async (arg, { rejectWithValue }) => {
    // 执行操作检查
    const isAllowed = operationCheck(arg);
    if (!isAllowed) {
      return rejectWithValue('操作不被允许');
    }
    
    // 执行异步操作
    try {
      const data = await fetchData();
      return data;
    } catch (error) {
      return rejectWithValue('请求失败');
    }
  }
);

在上述示例中,我们定义了一个操作检查函数operationCheck,它接收一个参数arg,并根据该参数进行操作检查。如果操作检查不通过,操作检查函数返回false,createAsyncThunk会直接返回一个rejected状态的thunk action,并将错误信息作为payload。

在创建异步thunk action时,我们将操作检查函数作为createAsyncThunk的第一个参数,将异步操作函数作为第二个参数。在异步操作函数中,我们首先执行操作检查函数,根据返回值决定是否继续执行异步操作。

需要注意的是,操作检查函数和异步操作函数都可以是异步的,可以返回Promise。如果操作检查函数或异步操作函数抛出异常或返回一个rejected状态的Promise,createAsyncThunk会将错误信息作为payload,并返回一个rejected状态的thunk action。

对于这个问题,由于没有具体的业务场景和需求,无法给出具体的腾讯云相关产品和产品介绍链接地址。但是,腾讯云提供了丰富的云计算服务和解决方案,可以根据具体的需求选择适合的产品和服务。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 我是这样在 React 中实践 TDD 编程

    然而,在添加功能之前编写测试有助于编写更好代码,因为你预先考虑了将使用设计模式、体系结构和变量名称。 我们正在构建一个用户管理仪表板。基本上,使用Redux,我们想执行CRUD操作。...用户可以: 创建用户 更新用户 删除用户 获取用户或用户列表 这个小项目中用户将有四个属性: id\name\username\email 为了简单起见,我们编写UI代码。...userSlice将有actions和reducer来执行CRUD操作。 slice默认状态应该是一个空数组,毕竟,我们处理是用户。...thunk是一个函数,它以storedispatch方法作为参数,然后在API或副作用完成后使用它来dispatch同步操作。 首先,让我们为这个特性编写测试。...users", () => { beforeAll(() => { mockNetWorkResponse(); }); it("Shoudl be able to fetch

    1.9K30

    redux 文档到底说了什么(下)

    安装: $ yarn add @reduxjs/toolkit configureStore 最重要 API 就是 configureStore 了: // store.ts const reducer...异步 之前我们用 redux-thunk 都是 action creator 返回函数方式来写代码,redux-toolkit 提供一个 createAsyncThunk 直接可以创建 thunk(其实就是返回函数...这里主要因为 toString() 会报 TS 类型错误,官方推荐写法是这样: // todos/slice.ts const todosSlice = createSlice({ name:...等等方法,这些 API 用起来就和用 Sequlize 这个库来操作数据库没什么区别,不足地方是 payload 一定要按照它规定格式,如 updateOne payload 类型就得这样...createReducer + createAction 其实 redux-toolkit 里面有挺多好东西,上面所说 API 大概覆盖了 80% 了,剩下还有 createReducer 和

    78320

    AbortController使用

    使用 AbortSignal 对象可以完成与 DOM 请求通信 这个 api 简单来说就是可以提供一个能力给我们去提前终止一个 fetch 请求 一个终止 fetch 请求 demo 如下: fetchButton.onclick...只需要调用controller.abort(),这些SomeObject实例都能被终止掉 如果SomeObject内部也有调用fetch之类内部 api 只需要把这个signal继续传递,则...传递给内置 apifetch和检查signal状态执行一些操作 export class SomeObject { constructor(signal) { this.signal = signal...} } } react hook 中异步调用 我们通常会在useEffect中进行一些异步 api 调用。...借助signal可以在下一次useEffect重新调用 api 时候将前一次调用终止 function FooComponent({ something }) { useEffect(() =>

    1.1K20

    你会在浏览器中打断点吗?我会!

    除了HTML Living Standard,WHATWG 还参与了一些其他规范制定,包括Web Workers、Web Storage、Fetch API 等。...有条件代码行 只在满足限定条件时,在指定地方触发断点 记录点 在暂停代码运行情况下向控制台输出日志 DOM 在更改或删除特定 DOM 节点或其子节点时触发断点 XHR 当 XHR URL 包含某个字符串模式时触发断点...根据函数参数个数匹配暂停 只有当当前函数以错误参数个数调用时才暂停:(arguments.callee.length) !...日志代码行断点 使用「日志代码行断点」(logpoints)可以在「暂停执行且不用在代码中添加console.log()调用情况下」,将消息输出到控制台。...打开,这样的话我们在断点触发后,也能查看框架内部处理逻辑。

    52110

    Web性能优化之Worker线程(下)

    考虑到上述情况,「注册」服务工作线程一种非常常见模式是「基于特性检测」,并在页面的 load 事件中操作。...onerror: 在关联服务工作线程触发 ErrorEvent 错误事件时会调用指定事件处理程序。...在「关联」服务工作线程「内部」抛出错误时触发 也可以使用 navigator.serviceWorker.addEventListener('error', handler)处理 onmessage:...在服务工作线程触发 MessageEvent 事件时会调用指定事件处理程序 在服务脚本「向父上下文发送消息」时触发 也可以使用 navigator.serviceWorker.addEventListener...❝在「同一页面」使用「同一 URL」 多次调用该方法会「返回相同注册对象」:即该操作是「幂等」 ❞ navigator.serviceWorker.register('.

    2.5K20

    如何取消 JavaScript 中异步任务

    正如你在 DOM 规范中所看到,AbortController 是用一种非常通用方式描述。所以你可以在任何类型异步 API 中使用 —— 甚至是那些目前还不存在 API。...目前只有 Fetch API 正式支持,但是你也可以在自己代码中使用它!...然后调用 fetch() 并传递 signal 作为其选项之一(3)。要中止获取资源,你只需调用abortController.abort()(4)。...在 abort 事件侦听器内部,删除了滴答计时器(7)并拒绝了带有适当错误promise (8; 根据规范(https://dom.spec.whatwg.org/#abortcontroller-api-integration...另外出现了一个保护子句,检查 abortSignal.aborted(2)值。如果等于 true,那么 calculate() 函数将会拒绝带有适当错误 promise,而无需执行任何其他操作

    3.3K10

    自定义协议 | Electron 安全

    调用资源都是 http(s)、file 这种,尤其像是加载插件之类操作内部也是类似于 vscode: 这种协议,这种就属于应用内注册自定义协议 今天内容也是围绕着这两种情况进行讨论 公众号开启了留言功能...此方法只能在 app ready 事件触发调用,且只能调用一次 此方法用来对我们自定义协议(scheme)进行配置,可以注册为一个标准、安全、允许注册 ServiceWorker、支持获取API、...,例如 https 包含 handler 协议处理程序,是一个协议处理函数 当Electron遇到匹配到schemeURL请求时 handler会被调用。...(pathToFileURL(pathToServe).toString()) } else if (host === 'api') { return net.fetch('https...此方法检查当前可执行程序是否是协议(也就是URI scheme) 默认处理程序。

    29510

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

    在这个 effect 中,我们设置了 document title 属性,不过我们也可以执行数据获取或调用其他命令式 API。 为什么在组件内部调用 useEffect?...,还会通过调用setData来更新本地状态,这样会触发view更新。...effect 可以使用它来读取 DOM 布局并同步触发重渲染 在浏览器执行绘制之前 useLayoutEffect 内部更新计划将被同步刷新 尽可能使用标准 useEffect 以避免阻塞视图更新...然后我们就可以使用符号(&)检查某个 tag 属性是否能触发一个特定行为。如果结果是非零,就表示可以。...以及这里是 React 如何检查行为触发(详见源码): if ((effect.tag & unmountTag) !

    9.6K20

    service worker 使用

    或者 127.0.0.1 也是 ok service worker 是异步内部通过 Promise 实现, localStorage 是同步,因此 service worker 内不许用使用...缓存和返回请求 每次任何被 service worker 控制资源被请求到时,都会触发 fetch 事件,因此我们可以利用 fetch 事件对资源响应做一些拦截操作 this.addEventListener...如遇到该问题,可尝试这么做:在 webserver 上添加对该文件过滤规则,缓存或设置较短有效期。...激活事件处理函数中,主要操作是清理旧版本 service worker 脚本中使用资源。...在线演示 源码 fetch (请求):当浏览器在当前指定 scope 下发起请求时,会触发 fetch 事件,并得到传有 response 参数回调函数,回调中就可以做各种代理缓存事情了。

    1.4K31

    一文入门react全家桶

    声明式编码 组件化编码 React Native 编写原生应用 高效(优秀Diffing算法) 1.1.4.React高效原因 使用虚拟(virtual)DOM, 总是直接操作页面真实...渲染类组件标签基本流程 1.React内部会创建组件实例对象 2.调用render()得到虚拟DOM, 并解析为真实DOM 3.插入到指定页面元素内部 2.2....编码操作 1.内部读取某个属性值 this.props.name 2.对props中属性值进行类型限制和必要性限制 第一种方式(React v15.5 开始已弃用): Person.propTypes...1)getState(): 得到state 2)dispatch(action): 分发action, 触发reducer调用, 产生新state 3)subscribe(listener): 注册监听..., 当产生了新state时, 自动调用 7.3. redux核心API 7.3.1. createstore() 作用:创建包含指定reducerstore对象 7.3.2. store对象 1.

    3.4K20

    目前5种最流行发送HTTP请求方法

    大多数较新HTTP请求包在复杂XMLHttpRequest API上提供简单抽象。 Fetch Fetch是一个简化、现代本机Javascript API,用于发出HTTP请求。...fetch方法接受一个配置对象作为第二个参数,以方便操作HTTP字段,如头、内容类型、请求方法等。您可以在其官方文档中找到Fetch支持配置选项完整列表。...我们必须手动检查HTTP错误并处理它们。 与Internet Explorer兼容,不过希望这不再重要了。 Axios Axios是用Javascript发出HTTP请求最流行第三方包之一。...在catch方法内部,我们可以使用一个错误来区分HTTP错误。响应检查,它存储HTTP错误代码。 为了使用Axios发送POST请求,我们使用专用Axios ....通过支持请求超时、重试和监控进度等特性,解决了本机Fetch API一些限制。

    3.1K20

    怎么防止同事用Evil.js代码投毒

    ,比如evil.js中,给JSON.stringify下毒了,把里面的I换成了l ,每周日prmisethen方法有10%概率触发,只有周日能触发着实有点损了, 并且npm报名就叫lodash-utils...toString,默认这些全局方法都是内置,我们在命令行里执行一下我们可以简单粗暴检查函数toStringfunction isNative(fn){ return fn.toString()..., iframe被加载到body后,获取iframe内部contentWindowlet iframe = document.createElement('iframe')iframe.style.display..., 然后在需要时候,运行检测函数, 判断Promise.prototype.then和我们备份是否相等,就可以甄别出原型链有没有被污染 ,我真是一个小机灵首先我们要备份相关函数,由于我们需要检查不是很多...= {getItem,setItem} _snapshots.fetch = fetch }})((0, eval)('this'))复制代码除了直接调用JSON,setTimeout,还有

    3.1K20

    redux-saga

    ())分步执行 通过iterator影响内部状态(iter.next(result)),注入异步操作结果 利用iterator错误捕获特性(iter.throw(error)),注入异步操作异常 用generator...API形式提供,提供各种语义用来生成Effect工具函数,例如把dispatch action包装成put、把方法调用包装成call/apply Effect -> 业务操作 在执行时内部进行转换...,例如把[Effect1, Effect2]转换为并行调用 类似于装箱(把业务操作用Effect包起来)拆箱(执行Effect里业务操作),此外,完整redux-saga还要实现: 作为middleware..., put)包起来) 有额外学习成本(理解各个creator语义,适应先包一层玩法) 例如: // 直接 const userInfo = yield API.fetch('user/info',...Api.fetch, '.

    1.9K41

    使用 React Testing Library 15 个常见错误

    虽然我们已经很努力地在文档里写要怎么 “更好地” 使用我们提供工具 API,但我还是在别的文章和博客中看到他们在用这些优雅使用方法。...我们现在还在进行 @testing-library/user-event 这个库开发,来保证它能像它承诺那样:能够触发用户在执行特定操作时会触发所有相同事件。...find* 其实也是在内部用了 waitFor),但是第二种使用方法更清晰,而且抛出错误信息会更友好。...(1) 在上面的例子中,如果 window.fetch 调用了两次,那么 waitFor 就会失败,但是我们就得等到超时了才能看到具体报错。...因此,callback 可在不确定时间和频率(在间隔以及 DOM 变化时调用)被调用(或者检查错误)。所以这也意味着你副作用可能会被多次调用

    1.3K20

    WorkBox 之底层逻辑Service Worker

    Cache API可以在Service worker作用域内和「主线程」作用域内访问。该特性为用户操作与 Cache 实例交互提供了许多可能性。...这些都是缓存策略应用方向。缓存策略使离线体验成为可能,并「通过绕过 HTTP 缓存触发高延迟重新验证检查提供更好性能」。 异步和事件驱动 API 在「网络上传输数据本质上是异步」。...安装(Installation) service worker在注册后触发其install事件。install「只会在每个service worker中调用一次,直到它被更新才会再次触发」。...当导航到service worker作用域内新页面时,浏览器会自动执行更新检查。 手动触发更新检查 关于更新,注册逻辑通常不应更改。然而,一个例外情况可能是「网站上会话持续时间很长」。...我们已经听说过一些关于「拦截网络请求」内容,而service worker内部fetch事件就是处理这种情况: // 建立缓存名称 const cacheName = "前端柒八九_v1"; self.addEventListener

    39920

    理解 Service Workers

    通过 Chrome 开发者工具栏查看缓存数据 Fetch 事件 fetch 事件在每次网页发送请求时候触发。...我们会首先检查是否有缓存数据,如果没有,就调用 fetch 方法发送网络请求,并返回 promise 。...基本上,任何需要确保连接网络操作,不管是即时操作还是网络离线后最终恢复情况,都需要作为 sync 事件注册。...推送消息 推送消息涉及到调用由浏览器提供 Push Api,再加上后端实现。Push Api 实现需要通过单独一篇文章来讲解,但是基本概念如下图所示: ?...在 fetch 事件处理中,我们检查了 request 是否满足一些条件(是否是 GET 请求、是否请求 HTML 内容;是否来源于当前路径等);如果满足这些条件,就返回缓存中内容。

    1.8K21
    领券