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