axios请求前端如何获取404的状态码

在前端开发过程中，我们经常需要发送请求与后端进行数据交互。其中，axios是一个常用的HTTP请求库，它可以用于发送Ajax请求，并支持Promise API。在实际开发中，我们经常需要根据HTTP响应的状态码来处理不同的业务逻辑。本文将介绍如何使用axios获取404状态码，并根据不同的场景进行处理。

1. axios简介

axios是一个基于Promise的HTTP请求库，可以用于浏览器和Node.js。它具有以下特点：

  • 符合Promise规范：支持async/await语法。
  • 支持浏览器和Node.js环境。
  • 支持请求和响应拦截器。
  • 支持取消请求。
  • 支持自动转换JSON数据。
  • 支持防止CSRF攻击。

2. 发送GET请求

首先，我们需要安装axios依赖，并引入axios库。

```shell
npm install axios

import axios from 'axios';

然后，我们可以使用axios发送GET请求。

axios.get(url)
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

3. 获取状态码

要获取状态码，我们可以在响应对象中访问status属性。例如：

axios.get(url)
  .then((response) => {
    console.log(response.status);
  })
  .catch((error) => {
    console.log(error);
  });

在上述代码中，我们通过response.status获取了HTTP响应的状态码。

4. 处理404状态码

接下来，我们将重点关注如何处理404状态码。

4.1 方案一：直接判断状态码

我们可以直接判断状态码是否为404来处理404错误。例如：

axios.get(url)
  .then((response) => {
    if (response.status === 200) {
      console.log('请求成功');
    } else if (response.status === 404) {
      console.log('请求资源不存在');
    } else {
      console.log('其他错误');
    }
  })
  .catch((error) => {
    console.log(error);
  });

在上述代码中，我们首先判断状态码是否为200，如果是则表示请求成功；然后判断状态码是否为404，如果是则表示请求的资源不存在；否则表示其他错误。

4.2 方案二：使用axios拦截器

另一种处理404状态码的方式是使用axios的拦截器。拦截器可以在请求发送前和响应返回后对请求和响应进行处理。我们可以在响应拦截器中判断状态码并进行相应的处理。

axios.interceptors.response.use(
  (response) => {
    if (response.status === 200) {
      console.log('请求成功');
    } else if (response.status === 404) {
      console.log('请求资源不存在');
    } else {
      console.log('其他错误');
    }
    return response;
  },
  (error) => {
    console.log(error);
    return Promise.reject(error);
  }
);

axios.get(url);

在上述代码中，我们通过axios.interceptors.response.use注册了响应拦截器。拦截器的第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。

5. 完整示例

下面是一个完整的示例，演示了如何使用axios获取404状态码，并根据不同的场景进行处理。

import axios from 'axios';

axios.interceptors.response.use(
  (response) => {
    if (response.status === 200) {
      console.log('请求成功');
    } else if (response.status === 404) {
      console.log('请求资源不存在');
    } else {
      console.log('其他错误');
    }
    return response;
  },
  (error) => {
    console.log(error);
    return Promise.reject(error);
  }
);

axios.get(url);

6. 甘特图

下面是使用mermaid语法绘制的一个甘特图，展示了请求处理的流程。

gantt
  title 请求处理流程

  section 请求发送
  发送请求: done, 2021-01-01, 1d

  section 响应