先看看 async/await 的语法

async 函数返回一个 Promise 对象

async 函数内部 return 返回的值。会成为 then 方法回调函数的参数。

1
2
3
4
async function  f() {
    return 'hello world'
};
f().then( (v) => console.log(v)) // hello world

如果 async 函数内部抛出异常,则会导致返回的 Promise 对象状态变为 reject 状态。抛出的错误而会被 catch 方法回调函数接收到。

async function e(){
throw new Error('error');
}
e().then(v => console.log(v))
.catch( e => console.log(e));

async 函数返回的 Promise 对象,必须等到内部所有的 await 命令的 Promise 对象执行完,才会发生状态改变

也就是说,只有当 async 函数内部的异步操作都执行完,才会执行 then 方法的回调。

 
const delay = timeout => new Promise(resolve=> setTimeout(resolve, timeout));
async function f(){
await delay(1000);
await delay(2000);
await delay(3000);
return 'done';
}
f().then(v => console.log(v)); // 等待6s后才输出 'done'
 

正常情况下,await 命令后面跟着的是 Promise ,如果不是的话,也会被转换成一个 立即 resolve 的 Promise
如下面这个例子:

async function  f() {
return await 1
};
f().then( (v) => console.log(v)) //

如果返回的是 reject 的状态,则会被 catch 方法捕获。

Async 函数的错误处理

async 函数的语法不难,难在错误处理上。
先来看下面的例子:

 
let a;
async function f() {
await Promise.reject('error');
a = await 1; // 这段 await 并没有执行
}
f().then(v => console.log(a));
 

如上面所示,当 async 函数中只要一个 await 出现 reject 状态,则后面的 await 都不会被执行。
解决办法:可以添加 try/catch

 
// 正确的写法
let a;
async function correct() {
try {
await Promise.reject('error')
} catch (error) {
console.log(error);
}
a = await 1;
return a;
} correct().then(v => console.log(a)); //
 

如果有多个 await 则可以将其都放在 try/catch 中。

如何在项目中使用呢  让我们结合Vuex来试试:

如何引入Vuex  以及编写

stroe.js

 
// stroe.js
import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions' Vue.use(Vuex) export const name = 'contract' const state = {
// 数据字典
initData: [],
number: ''
} const mutations = {
// 获取数据字典
SET_INIT_DATA (_state, obj) {
_state.initData = obj
},
// 获取分单申请ID集合
SET_NUMBER(_state, data) {
_state.number = data
console.log(_state)
}
} // 向外暴露store 对象
const store = new Vuex.Store({
namespaced: true,
name,
state,
actions,
mutations,
}) // 模块动态注册 项目庞大接口数量很大是便于管理 有疑惑 直戳 https://vuex.vuejs.org/zh/guide/modules.html 去vuex官网看看解释的更详细
store.registerModule(name, {
namespaced: true,
name,
state,
actions,
mutations,
}) export default store
 

actions.js 文件

 
// actions.js
import axios from 'axios'; const ajax = {
// 获取数据字典
GET_INIT_DATA: `agreement/init?`,
// 获取编号
GET_CONTRACT_NUMBER: `agreement/archive?`,
// 保存基本信息
SUBMIT_INFO: `agreement/submit/basic?`
}
// 提取公共部分
const API_URL = 'product/v1/middle/'; // 增加前缀
let INTERFACE = {};
for (let key in ajax) {
INTERFACE[key] = API_URL + ajax[key];
}
// 获取编号
function getContractNumber({commit}) {
return new Promise((resolve, reject) => {
axios.get(INTERFACE.GET_CONTRACT_NUMBER).then(data => {
commit('SET_NUMBER', {data}) // 改变state.number
resolve(data.data)
}).catch((err) => {
window.Alert(err)
})
})
}
// 获取数据字典
async function getInitData({commit, state}, params) {
 const num = await getContractNumber()
return new Promise((resolve, reject) => {
axios.get(INTERFACE.GET_INIT_DATA).then((data) => {
    commit('SET_INIT_DATA', {data}) // 改变state.initData
resolve(data.data)
}).catch((err) => {
window.Alert(err) // 全局错误提示
})
})
}

// 获取详情
function getInfo(id) {
return new Promise((resolve, reject) => {
// 写法2 模板字符串语法
axios.get(`apply/v1/${id}/input?`).then(data => {
resolve(data.data)
}).catch((err) => {
window.Alert(err) // 全局错误提示
})
})
}

// 提交
async function onSubmit({commit}, params) {
const result = await getInfo()
console.log(result)
return new Promise((resolve, reject) => {
axios.post(`${INTERFACE.SUBMIT_INFO}/${result.num}/products`, {...params}).then(data => {
resolve(data)
}).catch((err) => {
window.Alert(err) // 全局错误提示
})
})
} export default {
saveContrantInfo,
getContractNumber,
getInitData,
getInfo,
onSubmit
}
 

index.vue文件调用

 
<script>
import { name as moduleName } from '@/store'
export default {
data() {
return {
    // 基本信息
contractInfo: {},
    // 数据字典
    baseData: []
}
},
created() {
// 获取基本信息 若要then有返回值 actions 必须 resolve() 不然 then 方法没用
this.$store.dispatch(`${moduleName}/getInfo`).then(data => {
console.log(data)
})
// 获取数据字典
this.$store.dispatch(`${moduleName}/getInitData`).then(data => {
Object.assign(this.baseData, data)
})
},
methods: {
// 获取编号
async getNumber() {
     // 在 actions 函数里 await 也行 看具体需求 此例只作为演示 await 调用
const obj = await this.$store.dispatch(`${moduleName}/getContractNumber`)
this.contractInfo.fileNo = obj.fileNo
},// 提交
submit() {
this.$store.dispatch(`${moduleName}/onSubmit`, this.contractInfo).then(data => {
console.log(data)
})
}
}
}
</script>

以上就是 vuex 结合 async/await 的简单应用事例了。欢迎指正不足不对之处。

Vuex结合 async/await 优雅的管理接口请求的更多相关文章

  1. async/await 处理多个网络请求同步问题

    1.async/await是基于Promise的,是进一步的一种优化,await会等待异步执行完成 getProjectTask(id){ this.axios.get('/api/v1/task/' ...

  2. js中promise解决callback回调地狱以及使用async+await异步处理的方法

    1.callback回调地狱 function ajax(fn) { setTimeout(()=> { console.log('你好') fn() }, 1000) } ajax(() =& ...

  3. Axios及其async await封装

    Axios(IE8+) 基于promise的http库可用于浏览器与node.js 1.特性 支持promise API 拦截请求和相应 转换请求数据和响应数据 取消请求 自动转换JSON数据 客户端 ...

  4. 已配置好的vue全家桶项目router,vuex,api,axios,vue-ls,async/await,less下载即使用

    github 地址: https://github.com/liangfengbo/vue-cli-project 点击进入 vue-cli-project 已构建配置好的vuejs全家桶项目,统一管 ...

  5. 优雅地 `async/await`

    async/await 虽然取代了回调,使用类似同步的代码组织方式让代码更加简洁美观,但错误处理时需要加 try/catch. 比如下面这样,一个简单的 Node.js 中使用 async/await ...

  6. Vue实例中封装api接口的思路 在页面中用async,await调用方法请求

    一般我们写小型的项目是用不到封装axios实例 但是当我们写大型项目时  接口有时候多到有上百个接口,那我们在请求一次调用一次接口,接口上好多都是重复的,这个时候我们就可以封装axios实例,既节省了 ...

  7. 如何优雅地处理Async/Await的异常?

    译者按: 使用.catch()来捕获所有的异常 原文: Async Await Error Handling in JavaScript 译者: Fundebug 本文采用意译,版权归原作者所有 as ...

  8. 【限时免费】AppBoxCore - 细粒度权限管理框架(EFCore+RazorPages+async/await)!

    目录 前言 全新AppBoxCore RazorPages 和 TagHelpers 技术架构 页面处理器和数据库操作的异步调用 Authorize特性和自定义权限验证过滤器 Authorize登录授 ...

  9. 【C# TAP 异步编程】三、async\await的运作机理详解

    [原创] 本文只是个人笔记,很多错误,欢迎指出. 环境:vs2022  .net6.0 C#10 参考:https://blog.csdn.net/brook_shi/article/details/ ...

随机推荐

  1. python之auto鼠标/键盘事件

    mouse_key.py import os import time import win32gui import win32api import win32con from ctypes impor ...

  2. Golang利用select和普通函数分别实现斐波那契数列

    //斐波那契数列 //1 1 2 3 5 8 //观察规律 //第一轮:前两个数是1,1,相加等于2 //第二轮:第二个数和第三个数是1,2,相加等于3 //第三轮:第三个数和第四个数是2,3,相加等 ...

  3. MVC HTML页面使用

    解决HTML <system.webServer> <validation validateIntegratedModeConfiguration="false" ...

  4. 【题解】 Luogu CF375D Tree and Queries

    原题传送门 这道题要用树链剖分,我博客里有对树链剖分的详细介绍 我博客中对莫队的详细介绍 莫队好题 我一上来想写线段树,随后觉得不好写并弃坑 我们可以看见没有修改操作,钦定莫队 但这是在树上,所以不能 ...

  5. Vue 基础精讲

    Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...

  6. rabbitmq install erlang faild

    我安装的时候莫名的出现这2个错误 No Presto metadata available for rabbitmq-erlangwarning: /var/cache/yum/x86_64/7/ra ...

  7. 【Python30--文件系统】

    一.模块 定义:模块是一个包含所有定义的函数和变量的文件,后缀名是.py.模块可以被别的程序引用,以使用该模块中的函数等功能 >>> secret = random.randint( ...

  8. eMMC之分区管理、总线协议和工作模式【转】

    本文转载自:https://blog.csdn.net/u013686019/article/details/66472291 一.eMMC 简介 eMMC 是 embedded MultiMedia ...

  9. 【做题】apc001_f-XOR Tree——巧妙转化及dp

    对树上的路径进行操作是十分难处理的事情.一开始的思路主要针对于\(a_i<=15\)这一特殊性质上.于是考虑了\(a_i<=1\)的情况,然而除了糊出一个适用范围极小的结论外,并没有什么用 ...

  10. 浅谈FFT、NTT和MTT

    前言 \(\text{FFT}\)(快速傅里叶变换)是 \(O(n\log n)\) 解决多项式乘法的一个算法,\(\text{NTT}\)(快速数论变换)则是在模域下的,而 \(\text{MTT} ...