js中关于异常和异步的处理

2019-07-23  本文已影响0人  nzjcnjzx

异常的处理

通常我们在进行请求和后端通信的过程中, 会出现成功和失败, 对于失败的处理,每次请求都可能会产生失败
如果单独对于每次请都进行一次失败的处理,那么就会显得过于繁琐和冗余,这个时候需要的就是对于错误能有一个统一的处理, 一般我们出错的地方都是出现在请求失败的回调中,所以我们只需要对请求进行一次封装,让所有请求都执行封装之后的请求,然后就可以对错误进行统一处理

function handleError(xhr, status ,err, error) {
    try {
      var errObj = JSON.parse(xhr.responseText)
      if(errObj.errorCode === 4021) {
        location.href = '../app/login.html';
      } else {
        myAlert(errObj.errorMsg);
      }
        if(error) {
          error(xhr,status, err);
        }
    } catch (e) {
      myAlert('服務器異常,請聯系管理員!')
      throw '返回数据格式不正确'
    }
}

function RequestPost(route, dataObj,success,error) {
    $.ajax({
        type: "post",
        headers: {
          token: token
        },
        contentType: "application/json;charset=utf-8",
        url: baseUrl + route,
        dataType: "json",
        cache: false,
        data: JSON.stringify(dataObj),
        success: success,
        error: function(xhr, status, err) {
          handleError(xhr, status, err, error);
        }
      });
}

关于异步的处理

一般我们遇到的异步,也是出现在请求的时候, 目前处理异步的方法有回调,promise, async await

第一种使用回调的方式  回调是基于函数也可以作为参数进行传递
function a(cb){
  cb(params)
}
如果存在多个下一次请求依赖上一次请求的结果的情况,就会存在多个回调嵌套,加上错误的处理,这样代码的可读性就变得很差, 于是就出现了promise的处理方式
 function a(){
  return new Promise((resolve, reject)=> {
   resolve(data)
 })
}
a().then(data => {console.log(data)})
每次都返回一个promise对象, 当resolve执行, then 就会执行,这样代码的可读性就比回调好一些,但是当有很多次请求同样存在嵌套多次的情况
于是才有了async来处理
async 是 ES7 才有的与异步操作有关的关键字,和 Promise , Generator 有很大关联的。
async 函数返回一个Promise对象(如果指定的返回值不是Promise对象,也返回一个Promise,只不过立即 resolve ,处理方式同 then 方法),因此 async 函数通过 return 返回的值,会成为 then 方法中回调函数的参数:

async function doIt() {
    console.time("doIt");
    const time1 = 300;
    const time2 = await step1(time1);
    const time3 = await step2(time2);
    const result = await step3(time3);
    console.log(`result is ${result}`);
    console.timeEnd("doIt");
}
通过async 和await 进行配合使用就可以让我们以同步的方式来处理异步了
由于async 和await 通常只会处理 正确的情况,对于错误就需要使用
async  fn(){
try {
  await asyncFn()
} catch(err){
console.log(err)
}
}

来进行捕获
上一篇 下一篇

猜你喜欢

热点阅读