带有基本身份验证和错误的 Axios GET Req - Javascript

本文将介绍如何在 Javascript 中使用 Axios 库进行带有基本身份验证和错误处理的 GET 请求。

步骤

首先，需要安装 Axios 库。可以使用 NPM 进行安装：

npm install axios

接下来，可以在 JavaScript 文件中导入 Axios：

import axios from 'axios';

接着，可以使用 Axios 进行 GET 请求。以下是一个使用 Axios 进行 GET 请求的示例：

axios.get('https://jsonplaceholder.typicode.com/posts', {
  auth: {
    username: 'your_username',
    password: 'your_password'
  }
})
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

在此示例中，我们向 https://jsonplaceholder.typicode.com/posts 发送了一个 GET 请求，并将用户名和密码用于身份验证。如果请求成功，将在控制台中打印响应数据。如果请求失败，将在控制台中打印错误。

错误处理

在 Axios 中，可以使用 .catch() 方法来处理请求期间发生的错误。以下是一个使用 .catch() 方法来处理错误的示例：

axios.get('https://jsonplaceholder.typicode.com/posts/123', {
  auth: {
    username: 'your_username',
    password: 'your_password'
  }
})
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    if (error.response) {
      // 请求成功，但响应状态码不是 2xx
      console.error(error.response.data);
      console.error(error.response.status);
      console.error(error.response.headers);
    } else if (error.request) {
      // 请求失败
      console.error(error.request);
    } else {
      // 其他错误
      console.error('Error', error.message);
    }
  });

在此示例中，我们向 https://jsonplaceholder.typicode.com/posts/123 发送了一个 GET 请求，并将用户名和密码用于身份验证。如果请求成功，将在控制台中打印响应数据。如果请求失败，将在控制台中打印错误。

如果请求成功但响应状态码不是 2xx，将使用 error.response 对象打印响应数据、状态码和标头。如果请求失败，将使用 error.request 对象打印请求数据。如果出现其他错误，将打印错误消息。

结论

在 JavaScript 中使用 Axios 进行带有基本身份验证和错误处理的 GET 请求是非常简单的。可以使用 .then() 方法处理请求成功后的响应数据。可以使用 .catch() 方法处理请求期间发生的错误。如果请求成功但响应状态码不是 2xx，则可以使用 error.response 对象访问响应数据、状态码和标头。如果请求失败，则可以使用 error.request 对象访问请求数据。