如何实现一比一还原axios源码中的错误处理机制?

2026-05-23 07:280阅读0评论SEO资讯
  • 内容介绍
  • 文章标签
  • 相关推荐

本文共计1250个文字,预计阅读时间需要5分钟。

前文章节中,我们已能正确处理正确的请求,并通过处理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,中断后续的代码:

  我们在onreadystatechange回调中加入status的判断。

阅读全文

本文共计1250个文字,预计阅读时间需要5分钟。

前文章节中,我们已能正确处理正确的请求,并通过处理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,中断后续的代码:

  我们在onreadystatechange回调中加入status的判断。

阅读全文