使用async await处理错误方法示例

目录
  • Promise封装请求
  • async/await
  • await-to-js
    • 源码很简单
    • 使用很简单

Promise封装请求

大家平时如果使用Promise封装请求，那么当你使用这个请求函数的时候是这样的：

// 封装请求函数
const request = (url, params) => {
  return new Promise((resolve, reject) => {
    // ...do something
  })
}
// 使用时
const handleLogin = () => {
  request(
    '/basic/login',
    {
      usename: 'sunshine',
      password: '123456'
    }
  ).then(res => {
    // success do something
  }).catch(err => {
    // fail do something
  })
}

可以看到，当你的请求成功时，会调用then方法，当你的请求失败时会调用catch方法。

async/await

Promise的出现解决了很多问题，但是如果请求多了且有顺序要求的话，难免又会出现嵌套的问题，可读性较差，比如：

const handleLogin = () => {
  request(
    '/basic/login',
    {
      usename: 'sunshine',
      password: '123456'
    }
  ).then(res => {
    // 登录成功后获取用户信息
    request(
      '/basic/getuserinfo',
      res.id
    ).then(info => {
      this.userInfo = info
    }).catch()
  }).catch(err => {
    // fail do something
  })

所以这个时候async/await出现了，他的作用是：用同步的方式执行异步操作，上面的代码使用async/await的话可以改写成：

const handleLogin = async () => {
  const res = await request('/basic/login', {
    usename: 'sunshine',
    password: '123456'
  })
  const info = await request('/basic/getuserinfo', {
    id: res.id
  })
  this.userInfo = info
}

这样的话代码的可读性比较高，而不会出现刚刚的嵌套问题，但是现在又有一个问题了，Promise有catch这个错误回调来保证请求错误后该做什么操作，但是async/await该如何捕获错误呢？

await-to-js

其实已经有一个库await-to-js已经帮我们做了这件事，我们可以看看它是怎么做的，它的源码只有短短十几行，我们应该读读它的源码，学学它的思想

源码很简单

/**
 * @param { Promise } 传进去的请求函数
 * @param { Object= } errorExt - 拓展错误对象
 * @return { Promise } 返回一个Promise
 */
export function to(
  promise,
  errorExt
) {
  return promise
    .then(data => [null, data])
    .catch(err => {
      if (errorExt) {
        const parsedError = Object.assign({}, err, errorExt)
        return [parsedError, undefined]
      }
      return [err, undefined]
    })
}
export default to

源码总结：to函数返回一个Promise且值是一个数组，数组之中有两个元素，如果索引为0的元素不为空值，说明该请求报错，如果索引0的元素为空值说明该请求没有报错，也就是成功。

使用很简单

我们该怎么去使用这个to函数呢？其实很简单，还是刚刚的例子

const handleLogin = async () => {
  const [resErr, res] = await to(request('/basic/login', {
    usename: 'sunshine',
    password: '123456'
  }))
  if (resErr) {
    // fail do somthing
    return
  }
  const [userErr, info] = await to(request('/basic/getuserinfo', {
    id: res.id
  }))
  if (userErr) {
    // fail do somthing
    return
  }
  this.userInfo = info
}

所以说，偶尔看看一些库的源码，还是能学到东西的！！！

以上就是使用async await处理错误方法示例的详细内容，更多关于async await处理错误的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • JS循环中正确使用async、await的姿势分享

    JS循环中正确使用async、await的姿势分享

    目录 概览(循环方式 - 常用) 声明遍历的数组和异步方法 for 循环中使用 map 中使用 forEach 中使用 filter 中使用 附使用小结 总结 概览(循环方式 - 常用) for map forEach filter 声明遍历的数组和异步方法 声明一个数组:️ const skills = ['js', 'vue', 'node', 'react'] 再声明一个promise的异步代码: ️ function getSkillPromise (value) { return ne

  • JavaScript中async await更优雅的错误处理方式

    目录 背景 为什么要错误处理 async await 更优雅的错误处理 小结 总结 背景 团队来了新的小伙伴,发现我们的团队代码规范中,要给 async  await 添加 try...catch.他感觉很疑惑,假如有很多个(不集中),那不是要加很多个地方?那不是很不优雅? 为什么要错误处理 JavaScript 是一个单线程的语言,假如不加 try ...catch ,会导致直接报错无法继续执行.当然不意味着你代码中一定要用 try...catch 包住,使用 try...catch 意味着你

  • JS中的async与await怎么使用

    目录 一.async 二.await: 三.综合应用 一.async async创建一个异步函数来定义一个代码块,在其中运行异步代码; 怎样变成异步函数呢?以 async 这个关键字开始,它可以被放置在一个函数前面 async function f() { return 1; } f().then(alert); // 1 //上下结果一样 async function f() { return Promise.resolve(1); } f().then(alert); // 1 //也可以用

  • Javascript中async与await的捕捉错误详解

    Javascript中async与await的捕捉错误详解

    目录 async与await捕捉错误 正常的输出时 trycatch捕捉错误 多个异步嵌套时 await-to-js 异步嵌套使用了try,代码相对不够智能 总结 async与await捕捉错误 正常的输出时 <template> <div class="hello"> </div> </template> <script> export default { name: 'HelloWorld', created() { th

  • js异步之async和await实现同步写法

    首先我们假设有一方法 readFile 可以读取文件内容,  但是它是异步的. var gen = function* (){     var a = yield readFile('./a.txt');     console.log(a.toString());     var b = yield readFile('./b.txt');     console.log(b.toString()); }; 首先我们看下上面的代码,如果我们将function 后面的 * 改成 async,将y

  • async/await优雅的错误处理方法总结

    前言 node.js的世界,从callback开始,不会止于async. 本文将给大家详细介绍关于async/await优雅的错误处理的相关内容,下面话不多说了,来一起看看详细的介绍吧 async/await优雅的错误处理 一般情况下 async/await 在错误处理方面,主要使用 try/catch,像这样 const fetchData = () => { return new Promise((resolve, reject) => { setTimeout(() => { re

  • vue中异步函数async和await的用法说明

    vue中异步函数async和await的用法说明

    目录 异步函数async和await用法 async/await为什么叫异步 外异内同 异步函数async和await用法 先说一下async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行. 写一个async函数 async function timeout() { return 'hello world'; } 语法很简单,就是在函数前面加上async关键字,来表示它是异步的,那怎么调用呢?

  • 使用async await处理错误方法示例

    目录 Promise封装请求 async/await await-to-js 源码很简单 使用很简单 Promise封装请求 大家平时如果使用Promise封装请求,那么当你使用这个请求函数的时候是这样的: // 封装请求函数 const request = (url, params) => { return new Promise((resolve, reject) => { // ...do something }) } // 使用时 const handleLogin = () =>

  • NodeJs通过async/await处理异步的方法

    场景 远古时代 我们在编写express后台,经常要有许多异步IO的处理.在远古时代,我们都是用chunk函数处理,也就是我们最熟悉的那种默认第一个参数是error的函数.我们来模拟一个Mongo数据库的操作,感受一下. mongoDb.open(function(err, db){ if(!err){ db.collection("users", function(err, collection){ if(!err){ let person = {name: "yika&q

  • 理解Koa2中的async&await的用法

    Koa是一款非常著名的Node服务端框架,有1.x版本和2.x版本.前者使用了generator来进行异步操作,后者则用了最新的async/await方案 一开始使用这种写法的时候,我遇到一个问题,代码如下: const Koa = require('koa'); const app = new Koa(); const doSomething = time => { return new Promise(resolve => { setTimeout(() => { resolve('

  • 详解node Async/Await 更好的异步编程解决方案

    一.异步编程的终极解决方案 前几天写过关于 javascript 异步操作的文章<Javascript Promise 详解>. 最近在学习 Puppeteer的时候又发现另一种异步编程解决方案:Async/Await. 异步操作是 JavaScript 编程的麻烦事,麻烦到一直有人提出各种各样的方案,试图解决这个问题. 从最早的回调函数,到 Promise 对象,再到 Generator 函数,每次都有所改进,但又让人觉得不彻底. 它们都有额外的复杂性,都需要理解抽象的底层运行机制. 在 A

  • 详解async/await 异步应用的常用场景

    前言 async/await 语法用看起来像写同步代码的方式来优雅地处理异步操作,但是我们也要明白一点,异步操作本来带有复杂性,像写同步代码的方式并不能降低本质上的复杂性,所以在处理上我们要更加谨慎, 稍有不慎就可能写出不是预期执行的代码,从而影响执行效率.下面将简单地描述一下一些日常常用场景,加深对 async/await 认识 最普遍的异步操作就是请求,我们也可以用 setTimeOut 来简单模拟异步请求. 场景1. 一个请求接着一个请求 相信这个场景是最常遇到,后一个请求依赖前一个请求,

  • ES7之Async/await的使用详解

    在 js 异步请求数据时,通常,我们多采用回调函数的方式解决,但是,如果有多个回调函数嵌套时,代码显得很不优雅,维护成本也相应较高. ES6 提供的 Promise 方法和 ES7 提供的 Async/Await 语法糖可以更好解决多层回调问题. Promise 对象用于表示一个异步操作的最终状态(完成或失败),以及其返回的值. await 操作符用于等待一个Promise 对象.它只能在异步函数 async function 中使用. await 表达式会暂停当前 async function

  • C#异步编程由浅入深(二)之Async/Await的使用

      考虑到直接讲实现一个类Task库思维有点跳跃,所以本节主要讲解Async/Await的本质作用(解决了什么问题),以及Async/Await的工作原理.实现一个类Task的库则放在后面讲.首先回顾一下上篇博客的场景. class Program { public static string GetMessage() { return Console.ReadLine(); } public static string TranslateMessage(string msg) return m

  • 使用async await 封装 axios的方法

    es6 的promise 逐步解决了层层回调的问题,es8的async await让异步变成了同步的写法,在vue中,可以通过封装axios,使得所有的请求都可以使用同步写法,同时处理错误信息等,可以建一个api.js文件,全局创建api实例. import axios from 'axios' const qs = require('qs') const api = { async get (url, data) { try { let res = await axios.get(url, {

随机推荐