一比一还原axios源码(三)—— 错误处理

前面的章节我们已经可以正确的处理正确的请求,并且通过处理header、body,以及加入了promise,让我们的代码更像axios了。这一章我们一起来处理ajax请求中的错误。一、错误处理首先我

大家好,又见面了,我是你们的朋友全栈君。

  前面的章节我们已经可以正确的处理正确的请求,并且通过处理header、body,以及加入了promise,让我们的代码更像axios了。这一章我们一起来处理ajax请求中的错误。

一、错误处理

  首先我们要知道错误有哪些类型,通常我们遇到的错误有以下几种:网络错误、超时错误和非200状态码错误。其实都不复杂我们来看下:

1、网络异常

  网络异常,会触发XMLHttpRequest的onerror事件,所以我们只需要加上就可以了:

request.onerror = function handleError() {
  reject(new Error("Network Error"));
};

2、超时错误

  XMLHttpRequest对象允许配置timeout参数,默认是0,也就是永远不会超时,所以我们的代码这样处理就可以了,注意,这里的config.timeout的config,实际上就是我们传入的配置参数,只不过这里引用了一下,包括后续的完整的实现其他api的部分,有很多其实都是对原生api的一个简单的映射和转换,后面再说:

if (config.timeout) {
  request.timeout = config.timeout;
}

request.ontimeout = function handleTimeout() {
  reject(new Error(`Timeout of ${config.timeout} ms exceeded`));
};

3、非200状态码

  如果请求报错。那么XMLHttpRequest的status属性会返回0,所以我们需要额外判断下status,中断后续的代码:

<span role="heading" aria-level="2">一比一还原axios源码(三)—— 错误处理

   我们在onreadystatechange回调中加入status的判断。然后我们改变一下抛出response的方式,使用一个函数来处理:

return new Promise((resolve, reject) => {
var request = new XMLHttpRequest();
config.headers = processHeaders(config.headers || {}, config.data);
config.data = transformRequest(config.data);
request.open(
  config.method.toUpperCase(),
  buildURL(config.url, config.params, config.paramsSerializer),
  true
);
request.onreadystatechange = function handleLoad() {
  if (request.readyState !== 4) {
    return;
  }
  if (request.status === 0) {
    return;
  }
  const responseHeaders = parseHeaders(request.getAllResponseHeaders());
  const responseData =
    config.responseType && config.responseType !== "text"
      ? request.response
      : request.responseText;
  const response = {
    data: responseData,
    status: request.status,
    statusText: request.statusText,
    headers: responseHeaders,
    config,
    request,
  };
  handleResponse(response);
};
// 加了这个方法来集中处理response
function handleResponse(response) { if (response.status >= 200 && response.status < 300) { resolve(response); } else { reject(new Error(`Request failed with status code ${response.status}`)); } }

  很简单~~。错误处理完成到这里实际上就完成了,简单总结下,拦截了readystatechange事件中的status并根据对应的情况,处理response是resolve还是reject。然后根据timeout和error事件来抛出对应的错误。

  但是到这里还没真正的完成错误的处理,因为我们在错误处理的时候仅仅抛出了错误信息,没办法处理一些额外的数据,比如请求配置、响应对象等。我们下面来完成一个Error类,集中处理这些情况,让我们的代码更健壮。

二、完成AxiosError

  首先我们在core文件夹下创建一个createError文件:

export default function createError(message, config, code, request, response) {
  var error = new Error(message);
  return enhanceError(error, config, code, request, response);
}

  我们来看上面的代码,整个createError方法,返回了报错信息、配置、状态码、请求和响应内容。然后我们实际执行返回的是enhanceError方法。我们再来在core文件夹下创建一个enhanceError文件:

export default function enhanceError(error, config, code, request, response) {
  error.config = config;
  if (code) {
    error.code = code;
  }

  error.request = request;
  error.response = response;
  error.isAxiosError = true;

  error.toJSON = function toJSON() {
    return {
      // Standard
      message: this.message,
      name: this.name,
      // Microsoft
      description: this.description,
      number: this.number,
      // Mozilla
      fileName: this.fileName,
      lineNumber: this.lineNumber,
      columnNumber: this.columnNumber,
      stack: this.stack,
      // Axios
      config: this.config,
      code: this.code,
      status:
        this.response && this.response.status ? this.response.status : null,
    };
  };
  return error;
}

  上面的代码,很简单,把所有的信息绑定到error对象上,最后再返回error即可。其中需要注意的是,error.toJSON这个东西,它实际上做的就是当你在外层调用error的toJSON方法的时候,会返回这个更改后的方法。相当于改写了这个对象上的toJSON方法。

  比如我们打印下这个东西:

console.log(
  createError(timeoutErrorMessage, config, "ETIMEDOUT", request).toJSON()
);

<span role="heading" aria-level="2">一比一还原axios源码(三)—— 错误处理

  就是enhanceError返回的那个。OK,到此我们已经写好了createError方法(其实我是从源码复制过来的,一点修改都没有)。那么我们需要修改下之前错误处理中的代码,至于具体修改的方法,就当留个作业了。大家也可以去项目中的c3分支查看。

  到此,我们处理完了错误信息,添加了新的createError方法。到目前为止,其实代码都还不是真正的axios,为什么这么说呢,到现在,我们只是实现了其中的功能,但是其实还不是真正的axios源码的组织方式,我们下一章,就来扩展整个zaking-axios,修改文件的相关性,创建Axios类等,来完成更多的功能。

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/124370.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • MySQL导入Excel数据

    转载来自:https://www.cnblogs.com/yuwensong/p/4026332.html好了,现在我来介绍一下如何利用phpMyAdmin批量导入Excel内容到MySQL。首先你要知道phpMyAdmin是什么(不知道的这篇文章可以跳过了),我今天用的版本是phpMyAdmin3.2.4,MySQL的版本是5.1.41。1、第一步我们得到了一个excel表,里面有很多需…

  • 电气设计心得体会_原理图设计规范

    电气设计心得体会_原理图设计规范本博客将简述中兴通讯股份有限公司在原理图设计中需要注意的一些事项,其中包含了中兴设计开发部积累的大量硬件开发知识和经验,可以作为学习使用。硬件工程师可以学习并掌握检查条目的内容以及对条目的详细说明,学习部门经验。

  • obs录制黑屏怎么解决_obs窗口捕获黑屏

    obs录制黑屏怎么解决_obs窗口捕获黑屏00.目录文章目录00.目录01.问题描述02.问题分析03.问题解决04.成功测试01.问题描述打开OBS后,新建场景、新建显示器捕获后,黑屏没有显示,即使点击开始录制,然后结束录制后,录制的视频仍然是黑屏。02.问题分析安装包是从官网下载的,安装过程没有报错,启动过程也没有报错,但是却捕捉不到显示器中的图像。首先考虑的是软件兼容性的问题,但是在我将兼容性设置成”W…

  • macos 删除_mac实用工具重新安装macos

    macos 删除_mac实用工具重新安装macoscat/etc/paths/usr/local/bin/usr/bin/bin/usr/sbin/sbin进目录挨个看,找到以后删除

    2022年10月31日
  • 易优网成立「建议收藏」

    易优网成立「建议收藏」庆祝易优网成立,网址http://www.isyou.cn

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号