开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

从vuex action返回axios承诺

是指在Vue.js应用中使用vuex状态管理库的action函数中，通过调用axios库发送异步请求，并返回一个Promise对象。

在Vue.js应用中，vuex是一个专门用于状态管理的库。它将应用的状态集中存储在一个单一的地方，使得状态的变化和管理更加可控和可预测。在vuex中，action函数用于处理异步操作，例如发送网络请求。

axios是一个流行的基于Promise的HTTP客户端，用于发送网络请求。它可以在浏览器和Node.js中使用，并提供了丰富的功能和易于使用的API。

当在vuex的action函数中需要发送异步请求时，可以使用axios发送请求，并返回一个Promise对象。这个Promise对象可以在action函数的调用者中使用，以便在请求完成后执行相应的操作。

以下是一个示例代码，展示了从vuex action返回axios承诺的用法：

// 在vuex的actions中定义一个异步操作
actions: {
  fetchData({ commit }) {
    return new Promise((resolve, reject) => {
      axios.get('/api/data')
        .then(response => {
          // 请求成功时，提交mutation来更新状态
          commit('setData', response.data);
          resolve();
        })
        .catch(error => {
          // 请求失败时，可以进行错误处理
          reject(error);
        });
    });
  }
}

// 在组件中调用action函数
this.$store.dispatch('fetchData')
  .then(() => {
    // 请求成功后的操作
  })
  .catch(error => {
    // 请求失败后的操作
  });

在上述示例中，fetchData是一个vuex的action函数，它使用axios发送GET请求来获取数据。在请求成功时，通过commit方法提交一个mutation来更新状态。在请求完成后，可以通过Promise的then方法和catch方法来处理请求的结果。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云人工智能：https://cloud.tencent.com/product/ai
腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发：https://cloud.tencent.com/product/mobile
腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
腾讯云元宇宙：https://cloud.tencent.com/product/tencent-metaverse

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Koa的洋葱中间件，Redux的中间件，Axios的拦截器，一个精简版的就彻底搞懂了。

本文将从koa、axios、vuex和redux的实现来教你怎么编写属于自己的插件机制。对于新手来说：本文能让你搞明白神秘的插件和拦截器到底是什么东西。...axios 首先我们模拟一个简单的axios，这里不涉及请求的逻辑，只是简单的返回一个Promise，可以通过config中的error参数控制Promise的状态。...= promise.then(resolved, rejected); } // 最后暴露给用户的就是响应拦截器处理过后的promise return promise; }; 复制代码从axios.run...vuex vuex提供了一个api用来在action被调用前后插入一些逻辑： vuex.vuejs.org/zh/api/#sub… store.subscribeAction({ before:.../vuex.type'; class Vuex { state = {}; action = {}; _actionSubscribers = []; constructor({

2K1 0

前端网红框架的插件机制全梳理（axios、koa、redux、vuex）

本文将从koa、axios、vuex和redux的实现来教你怎么编写属于自己的插件机制。对于新手来说：本文能让你搞明白神秘的插件和拦截器到底是什么东西。...axios 首先我们模拟一个简单的 axios，这里不涉及请求的逻辑，只是简单的返回一个 Promise，可以通过 config 中的 error 参数控制 Promise 的状态。...promise = promise.then(resolved, rejected); } // 最后暴露给用户的就是响应拦截器处理过后的promise return promise; }; 从axios.run...vuex vuex 提供了一个 api 用来在 action 被调用前后插入一些逻辑： https://vuex.vuejs.org/zh/api/#subscribeaction store.subscribeAction.../vuex.type"; class Vuex { state = {}; action = {}; _actionSubscribers = []; constructor({

1.9K3 0

【译】如何大大简化你的Vuex Store

我们怎么使用Vuex 我们正在使用Vuex在Factory Core Framework应用程序中的所有应用程序之间共享状态。由于框架是一组应用程序，（假设）我们目前有九个Vuex stores。...每个action都执行以下操作：从API获取数据（必要时包括有效负载）以state存储数据（可选）返回对调用该action组件的响应要将这些重构为单个（统一）操作action，我们需要知道action...中，我们通过击中端点（发起请求）api.factory.com/geteLineWorkOrders从我们的后台API获取数据。...中，我们通过击中端点（发起请求）api.factory.com/geteLineWorkOrders从我们的后台API获取数据。...它始终将数据返回到组件。使用统一的mutation 之前，对于需要改变状态mutate state的每个action，我们创建了一个新的mutation来处理这个问题。

1.5K2 0

vue面试题总结(二)

有 5 种，分别是 state、getter、mutation、action、module vuex 的 store 是什么？ vuex 就是一个仓库，仓库里放了很多对象。...更改Vuex的store中的状态的唯一方法是提交mutation vuex 的 action 是什么？...中还是 vuex 的 action 中 vuex 的 module 是什么？...如果请求来的数据不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入 vuex 的 state 里如果被其他地方复用，请将请求放入 action 里，方便复用，并包装成 promise 返回 18...mounted 注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.

1.6K4 0

Vuex 之单元测试

commit 一个 mutation dispatch 一个 action 通过 $store.state 或 getters 访问 state 要针对 Vuex 进行的单元测试，都是基于 Vuex...同样的，我们会遵循一个通常的 Vuex 模式创建一个 action：发起一个向 API 的异步请求对数据进行一些处理（可选）根据 payload 的结果 commit 一个 mutation 这里有一个...通过在 poodlesByAge 返回一个接受参数的函数，我们可以向 getters 中传入参数。...$store.getters.poodlesByAge(1) } } 让我们从测试 poodles 开始吧。...it("dispatch a namespaced action when button is clicked", async () => { const store = new Vuex.Store

3.3K2 0

【译】如何大大简化你的Vuex Store

我们怎么使用Vuex 我们正在使用Vuex在Factory Core Framework应用程序中的所有应用程序之间共享状态。由于框架是一组应用程序，（假设）我们目前有九个Vuex stores。...每个action都执行以下操作：从API获取数据（必要时包括有效负载）以state存储数据（可选）返回对调用该action组件的响应要将这些重构为单个（统一）操作action，我们需要知道action...async getLineWorkOrders({ rootState, commit }, payload) { try { let response = await axios.post...中，我们通过击中端点（发起请求）api.factory.com/geteLineWorkOrders从我们的后台API获取数据。...它始终将数据返回到组件。使用统一的mutation 之前，对于需要改变状态mutate state的每个action，我们创建了一个新的mutation来处理这个问题。

1.6K2 0

从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（四）

$store.state.products[0]; } } } 可以看到，上面的内容改进主要分为两个部分： •首先我们定义了一个 product 计算属性，它里面返回一个从...，例如： ACTION_NAME(state, payload) { // 对 `state` 进行操作以返回新的 `state` return newState; } 其中方法名 ACTION_NAME...使用 Action 获取远程数据我们在上一节中学习了如何在视图层发起本地状态修改的“通知”，这一节我们来学习如何从后端获取远程数据。...请求库我们采用的是 axios[7]，通过以下命令安装依赖： npm install axios 理解 Action：异步操作 Vuex 为我们提供了 Action，它是用来进行异步操作，我们可以在这里向后端发起网络数据请求...$store.dispatch 的方式触发类型为 allProducts 的 action 中，在 action 中进行异步操作，发起网络请求向后端请求商品数据并返回；如果是 false 则证明本地中存在商品

2.1K1 0

Vue 全家桶介绍

三、vuex vuex为专门为vue.js应用程序开发的状态管理可以理解为全局的数据管理。vuex主要由五部分组成：state action、mutation、getters、module组成。...2、actions Action 通过 store.dispatch 方法触发：action支持异步调用（可以调用api），mutation只支持操作同步，并且action提交的是 mutation，而不是直接变更状态...就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算 const getters = { getRateInitData: state => state.rateInitData...axios是一个http请求包，vue官网推荐使用axios进行http调用。...安装： npm install axios –save 例子： 1.发送一个GET请求 //通过给定的ID来发送请求 axios.get(‘/user?

1K3 0

vue.js应用开发笔记

，于是就琢磨着把vue简单的过下，如下所讲只是个人一些理解，不到的地方还望园友指正，涉及到的东西有vue、vue-router、vuex、axios以及nodejs一些后台东西，废话不说了直接上菜吧。...三、vuex状态管理 vuex主要用来进行全局状态管理，可以理解为全局的数据管理，vuex主要由几部分组成：action、mutation、getters、state组成，一般的使用流程是：组件中可以直接调用上面四个部分...，比如调用action，可以使用：this....，返回promise对象）。...，比如说我们服务端返回状态码为403，表示无权限信息，那么这里可以直接进行相关错误信息展示，或者直接跳转至登录或其它页面。

2.5K1 0

真正掌握vuex的使用方法（六）

from "axios"; import {mapState} from "vuex"; export default { name: 'App', data...比如咱们的axios放在哪里比较合适呢？在这个时候咱们就可以用到action了。通过action来操作mutations最终来改变state的值。...接下来在store.js中添加actions: import Vue from 'vue';//引用vue import Vuex from 'vuex';//引用vuex import axios from..."axios" Vue.use(Vuex);//使用vuex const state={ tagList:[] }; const mutations={ //用于改变state下的tagList...当然调用action的方法也有简写的形式： //引入mapActions import {mapState,mapActions} from "vuex"; export default { name

5202 0

从源码分析expresskoareduxaxios等中间件的实现方式

// compose是按照从右向左的顺序支持函数列表，因此当在视图中调用dispatch(action)时，只有在最后一个中间件中调用next(action)才会触发真实的store.dispatch(...chain中的方法，并将上一个方法的返回值作为作为下一个方法这里的上一个方法就是action => {next(action)}，跟原始的store.dispatch结构一致，因此组合函数最后的返回值可以理解为是经过组合函数包装后的...提供了一个 api 用来在 action 被调用前后插入一些逻辑：https://vuex.vuejs.org/zh/api/#subscribeactionstore.subscribeAction.../vuex.type";class Vuex { state = {}; action = {}; _actionSubscribers = []; constructor({ state, action..._actionSubscribers.push(subscriber); }}const store = new Vuex({ state: { count: 0 }, action: {

1.9K4 0

解决post方法使用applicationx-www-form-urlencoded格式编码数据

/axios/axios axios axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端它本身具有以下特征：从浏览器中创建 XMLHttpRequest 从 node.js...并不能 use，只能每个需要发送请求的组件中即时引入为了解决这个问题，有两种开发思路，一是在引入 axios 之后，修改原型链，二是结合 Vuex，封装一个 aciton 使用npm npm install...解决方法有很多种： 1.结合 vue-axios使用 axios 改写为 Vue 的原型属性 3.结合 Vuex的action 结合 vue-axios使用 vue-axios 用于将axios...((response)=>{ console.log(response); }) 方法3：结合vuex 在vuex在封装一层封装 axios import axios from...，登出并返回到登录页 * 如通过xmlhttprequest 状态码标识逻辑可写在下面error中 */ // const res = response.data; // if

3.3K2 0

Nuxt 踩坑记

在 async 中返回的对象将直接挂载到 data 上。如果 data 中原先有相同的键，将会被覆盖。 axios 拦截器 Nuxt/axios 同样为我们提供了拦截器，与原生的大同小异。...[vuex] unknown action type js 1...mapActions({ 2 updateViewport: 'viewport/updateViewport' 3...}) COPY 在模块中，state 应返回一个函数，函数返回一个对象。...Nuxt 中默认在开发环境中设定了严格模式，在严格模式下外部不能直接调用 action 去改变 state 的值。...Error: form binding with Vuex - Do not mutate vuex store state outside mutation handlers 我们需要在 store/

2.2K1 0

使用vue技术栈，作为一个前端架构师是必须掌握这些知识点的

由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态： // 创建一个 tree 组件 const trees = { template: `...Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）： const app = new Vue({ el: '#app',...首先，你需要明白 store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise： actions: {...Axios 功能 1.从浏览器中创建 XMLHttpRequests 2.从 node.js 创建 http 请求 3.支持 Promise API 4.拦截请求和响应 5.转换请求数据和响应数据 6....var context = new Axios(defaultConfig); // 自定义 bind 方法返回一个函数（）=> {Axios.prototype.request.apply

4.3K5 2

Vuex从入门到精通(一)

当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。你不能直接改变 store 中的状态。...Vuex 核心概念一个完整的 Vuex Store /** * index.js */ import axios from 'axios' const store = new Vuex.Store...类似于mutation,不同在于只能通过 commit mutation 通知状态变化 mutation 只能包含同步操作，而 action 可以包含异步操作(比如, 在这里可以执行ajax请求)...允许我们将store分割成模块，每个模块拥有自己的state, mutation, action, getter, 甚至是嵌套子模块 : const store = new Vuex.Store({...，我将演示如何使用 vue + vuex 以及其他常用组件从入门到实战。

1.2K7 0

vue,vue-router,vuex,axios整合

*vue官网：https://cn.vuejs.org/ vue-router官网：https://router.vuejs.org/zh-cn/ vuex官网：https://vuex.vuejs.org.../action' import getters from '..../getter' Vue.use(Vuex) #index.js中主要配置state-->就是我们所需要的数据 const state = { mytest: 'NB', } #导出vuex对象树...} ---------------------------------------------------------------------------------------------- action.js...http.js文件，导出axios对象，该文件主要提供axios配置，如请求拦截器等等 import axios from 'axios' // axios 配置 axios.defaults.timeout

1.1K2 0

从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（六）

// ... import Vuex from 'vuex'; import axios from 'axios'; import { productGetters, manufacturerGetters...$route.params['id']); // 这里返回 product 的拷贝，是为了在修改 product 的拷贝之后，在保存之前不修改本地 Vuex stire 的 product...当该组件刚被创建时判断计算属性model中是否有值，如果没有则表示本地中没有该商品，将包含该商品id的对象作为载荷分发到类型为productById的action中，在action中进行异步操作从后端获取对应商品...$route.params['id']); // 这里返回 product 的拷贝，是为了在修改 product 的拷贝之后，在保存之前不修改本地 Vuex stire 的 product...中，在action中进行异步操作从服务器获取对应制造商，然后将该制造商提交到对应mutation中进行本地状态修改，将获取到的制造商保存到本地。

8123 0

vue11Vuex解说+子父传参详细使用

state中存放的状态值是响应式的，从store实例中读取状态最简单的方式是在计算属性中返回某个状态。.../* * 通过计算属性读取store中的值,并根据获取到的值返回展开或折叠样式。...，如果任务A需要等待，可先执行任务B，等到任务A结果返回后再继续回调。...与mutation定义语法类型，不同点： * 1) Action提交的是mutation，而不是直接变更状态，mutation直接变更状态 * 2) Action可以包含任意异步操作 * 3) Action..._this; let url = _this.axios.urls.VUE_ASYN_REQ; _this.axios.post(url, { param: payload.PersonName

1.2K3 0

哪些拿住我面试题

，请将请求放入 action 里，方便复用，并包装成 promise 返回 5、不用 vuex 会带来什么问题　　可维护性会下降，你要修改数据，你得维护3个地方　　可读性下降，因为一个组件里的数据，...返回在.then函数中如果成功，失败则是在.catch函数中 8、axios+tp5进阶中，调用axios.post(‘api/user’)是进行的什么操作？...vuex 1、vuex有哪几种属性？答：有五种，分别是 State、 Getter、Mutation 、Action、 Module 2、vuex的State特性是？...二、如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用，并包装成promise返回，在调用处用async await处理返回的数据。...返回在.then函数中如果成功，失败则是在.catch函数中 axios+tp5进阶中，调用axios.post(‘api/user’)是进行的什么操作？

2.1K3 0

三年经验前端vue面试记录

类似于 muation, 不同在于：action 提交的是 mutation,而不是直接变更状态action 可以包含任意异步操作modules：面对复杂的应用程序，当管理的状态比较多时；我们需要将vuex...这是vuex存在的必要性，它和react生态中的redux之类是一个概念Vuex 解决状态管理的同时引入了不少概念：例如state、mutation、action等，是否需要引入还需要根据应用的实际情况衡量一下...现在 axios 已经成为大部分 Vue 开发者的首选特性从浏览器中创建 XMLHttpRequests从 node.js 创建 http请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换...有五种，分别是 State、 Getter、Mutation 、Action、 Modulestate => 基本数据(数据源存放地)getters => 从基本数据派生出来的数据mutations =...pinia中只有state、getter、action，抛弃了Vuex中的Mutation，Vuex中mutation一直都不太受小伙伴们的待见，pinia直接抛弃它了，这无疑减少了我们工作量。

2.1K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭