0. 系列文章

项目源码请猛戳这里!!!

1. 前言

在响应回来处理响应结果时，我们需要先判断一下XMLHttpRequest 响应中的数字状态码是否是一个合法值，如果是一个我们认定的合法值，那么我们就继续进行下一步操作，如果不是，则做其他操作，如抛出异常等。在之前的代码中，我们把判断响应状态码是否合法是直接写死在代码里的，我们简单的认为当状态码在200到300之间时候它是合法的，否则即为不合法。虽然这样符合大多数用户的业务场景，但是我们这样武断的直接写死在代码里显然是不行的，因为我们毕竟覆盖不了所有用户的业务场景。这就要求状态码合法性的校验规则应该是由用户可配置的。

而在官方axios中，在请求配置对象里提供了validateStatus属性，该属性值是一个状态码校验函数，接收状态码作为函数参数，返回校验结果true或false，并且这个属性也在默认请求配置对象中。官方文档是这么介绍的：

// `validateStatus` defines whether to resolve or reject the promise for a given

// HTTP response status code. If `validateStatus` returns `true` (or is set to `null` or `undefined`),

// the promise will be resolved; otherwise, the promise will be rejected.

validateStatus: function (status) {

    return status >= 200 && status < 300; // default

}

如果validateStatus函数返回true，或者validateStatus属性值被设置为null，或者没有用户配置了validateStatus属性但是没有定义校验函数的时候，都认为是合法的，正常 resolve(response)，否则都会抛出异常。

搞明白官方axios中的validateStatus属性功能后，那么接下里，我们也要为我们的axios添加validateStatus属性，并实现其功能。

2. 向请求配置对象添加属性

向请求配置对象config中添加 validateStatus 属性之前，我们需要先在src/types/index.ts中的配置对象的接口类型定义AxiosRequestConfig上添加该属性的定义，如下：

export interface AxiosRequestConfig {

  // 新增

  validateStatus?: (status: Number) => Boolean;

}

添加好属性接口后，我们还要给默认请求配置对象src/default.ts中添加这两个属性，并且属性的默认值跟官方axios保持一直，如下：

const defaults: AxiosRequestConfig = {

  // 新增

  validateStatus(status: Number): boolean {

    return status >= 200 && status < 300

  }

};

3. 修改之前的状态码判断逻辑

在之前的代码中，我们把判断响应状态码是否合法是直接写死在代码里的，现在我们应该调用用户传入的状态码校验函数，用它来校验状态是否合法，如下：

function handleResponse(response: AxiosResponse): void {

    if (!validateStatus || validateStatus(response.status)) {

        resolve(response);

    } else {

        reject(

            createError(

                `Request failed with status code ${response.status}`,

                config,

                null,

                request.status,

                response

            )

        );

    }

}

OK，validateStatus属性就添加好了，并且状态码判断逻辑也修改了。接下来，我们就来编写demo来测试下效果如何。

4. demo编写

在 examples 目录下创建 checkStatus目录，在 checkStatus目录下创建 index.html:

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <title>checkStatus demo</title>

  </head>

  <body>

    <script src="/__build__/checkStatus.js"></script>

  </body>

</html>

接着再创建 app.ts 作为入口文件：

import axios from "../../src/axios";

axios.get("/api/checkStatus").then(res => {

  console.log(res);

});

axios

  .get("/api/checkStatus", {

    validateStatus: status => status >= 200 && status < 400

  })

  .then(res => {

    console.log(res);

  });

接着在 server/server.js 添加新的接口路由：

// 请求状态码合法性校验

router.get("/api/checkStatus", function(req, res) {

  res.status(304);

  res.end();

});

在本demo我们发送了两个请求，一个请求没有配置validateStatus属性，它会使用默认请求对象中的validateStatus校验函数，即判断状态码是否在200到300之间；第二个请求我们配置了validateStatus属性，并且配置了校验函数，判断状态是否在200到400之间。另外，在服务端路由接口中，我们故意把响应状态设置为304，这样第一个请求就会校验不通过抛出异常，第二个请求将会校验通过。

最后在根目录下的index.html中加上启动该demo的入口：

<li><a href="examples/checkStatus">checkStatus</a></li>

OK,我们在命令行中执行：

# 同时开启客户端和服务端

npm run server | npm start

接着我们打开 chrome 浏览器，访问 http://localhost:8000/ 即可访问我们的 demo 了，我们点击 checkStatus，就可以看到请求都已经正常发出，在控制台上第一个请求抛出了状态码异常，第二个请求正常响应了。

OK，以上就是为我们的axios添加validateStatus属性，并实现了其功能。

（完）

使用Typescript重构axios(二十七)——添加请求状态码合法性校验的更多相关文章

使用Typescript重构axios(二十三)——添加withCredentials属性
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
使用Typescript重构axios(二十一)——请求取消功能：添加axios.isCancel接口
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
使用Typescript重构axios(二十)——请求取消功能：实现第一种使用方式
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
使用Typescript重构axios(二十二)——请求取消功能：收尾
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
使用Typescript重构axios(二十六)——添加HTTP授权auth属性
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
使用Typescript重构axios(二十八)——自定义序列化请求参数
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
使用Typescript重构axios(二十九)——添加baseURL
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
使用Typescript重构axios(二)——项目起手，跑通流程
0.系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三)- ...
使用Typescript重构axios(二十四)——防御XSRF攻击
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...

随机推荐

《完美解决系列》Android5.0以上 Implicit intents with startService are not safe
在Android6.0上,使用了以下代码: Intent intent = new Intent(); intent.setAction("xxx.server"); bindSe ...
web动态站面试题
1.简述 tomcat 的启动过程? 答:Tomcat 启动--> 读取自己的 server.xml-->根据 Context 标签的内容找到项目目录. 项目入口 path-->读取 ...
Spring Boot2 系列教程(十二)@ControllerAdvice 的三种使用场景
严格来说,本文并不算是 Spring Boot 中的知识点,但是很多学过 SpringMVC 的小伙伴,对于 @ControllerAdvice 却并不熟悉,Spring Boot 和 SpringM ...
引入flask_cache时出现ModuleNotFoundError: No module named 'flask.ext'
环境: centos 7.3 python 3.6 flask 1.0.2 flask-cache 0.13.1 引入flask_cache后运行时,出现以下错误 Traceback (most re ...
surging 微服务引擎 -协议主机的Behavior特性
1.前言因为工作的关系,最近很少更新surging,因为surging 一直处在不温不火的状态,而自己每天利用业余时间进行完善,每天都是疲惫的状态,还要应付新手的提问,曾经一度想放弃,但是有些人劝说 ...
django-drf框架中排序和查询组件
0910自我总结 django-drf框架中排序和查询组件一查询相关 1.模糊查询 1.导入模块组件 from rest_framework.filters import SearchFilter ...
STM32串口IAP分享
什么是IAP? IAP是In Application Programming的首字母缩写,IAP是用户自己的程序在运行过程中对User Flash的部分区域进行烧写,目的是为了在产品发布后可以方便地通 ...
VPS虚拟专用服务器
目录 0x00 VPS服务器概述 0x01 VPS工作原理 0x02 VPS用途 0x03 VPS优势 0x04 VPS特点 0x00 VPS服务器概述 VPS服务器(虚拟专用服务器)(" ...
2019年高级Java程序员面试题汇总
目录 JDK Dubbo Zookeeper Strut2 Spring系列 Redis系列 Mysql系列 Java多线程消息中间件线程池事物 JVM 设计模式其他程序设计基础知识编程 ...
Linux shell脚本笔记
shell 命令解释器是用来解释用户对系统的操作使用 cat /etc/shells 可以查看系统安装的shell Linux 启动过程: BIOS -> MBR -> BootLo ...

使用Typescript重构axios(二十七)——添加请求状态码合法性校验