先看看 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)) // 1
如果返回的是 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)); // 1
如果有多个 await 则可以将其都放在 try/catch 中。
如何在项目中使用呢 让我们结合Vuex来试试：
如何引入Vuex 以及编写
stroe.js
// stroe.jsimport 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.jsimport 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文件调用
以上就是 vuex 结合 async/await 的简单应用事例了。欢迎指正不足不对之处。
参考文章
发表评论