Vuex结合 async/await 优雅的管理接口请求

编程艺术家 3552 0

先看看 async/await 的语法

async 函数返回一个 Promise 对象

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

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

import Vue     name =  state =  =
  == store =  store

actions.js 文件

import axios   ajax =
  : 
  : 
  : `  = let INTERFACE = (let key =  +
function ({commit}) {
  Promise((resolve, reject) => {
    axios.get(.).(data => {
('', {data})   
(data.data)
    }).((err) => {
(err)
    })
  })
}
 function ({commit, state},   Promise((resolve, reject) =>(.).((data) =>((err) =>  Promise((resolve, reject) =>().(data =>((err) =>  ({commit},  result =   Promise((resolve, reject) =>}).(data =>((err) =>

 index.vue文件调用

<script> moduleName }  
      .$store.().then(data =>
      .$store.().then(data =>
       obj =  .$store.(.contractInfo. =.$store.(, .contractInfo).then(data =></script>

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

转载于:https://www.cnblogs.com/ljx20180807/p/9838259.html


标签: #linux

  • 评论列表

留言评论