当前位置：首页 > article >正文

什么是axios？怎么使用axios封装Ajax？

article 2024/11/23 7:14:50

学习目标

什么是axios
怎么使用axios封装Ajax
该如何使用Axios 封装 XHR 请求

什么是axios

Axios 是一个基于 Promise 的 HTTP 客户端，它可以在浏览器和 Node.js 环境中使用。Axios 提供了简单易用的 API，用于执行各种 HTTP 请求操作，如 GET、POST、PUT、DELETE 等。

以下是 Axios 的一些关键特性和功能：

基于 Promise：Axios 的 API 设计完全基于 Promise，这使得它能够很好地与 async/await 语法结合使用，从而简化了异步操作的处理。
请求和响应的拦截器：Axios 支持请求和响应的拦截器，允许你在请求发送前或响应接收后对其进行处理。这可以用于添加认证信息、处理错误、记录日志等。
自动转换数据：Axios 会自动将请求数据转换为请求体（例如，将 JavaScript 对象转换为 JSON 字符串），并自动解析响应数据（例如，将 JSON 字符串转换为 JavaScript 对象）。
取消请求：你可以使用 Axios 提供的取消令牌（CancelToken）来取消已发出的请求。
防止跨站请求伪造（XSRF）：在浏览器环境中，Axios 可以自动从 cookies 中读取 XSRF 令牌，并将其添加到请求头中，以防止跨站请求伪造攻击。
配置灵活性：你可以通过创建一个 Axios 实例来配置其默认设置，如基础 URL、超时时间、请求头等。这使得在不同的项目或不同的请求中重用相同的配置变得更加容易。
浏览器和 Node.js 兼容：Axios 可以在所有现代浏览器中运行，并且也支持在 Node.js 环境中使用，这使得它成为一个跨平台的 HTTP 客户端。
小型且高效：Axios 的代码库相对较小，但它提供了丰富的功能，使得它成为许多 Web 应用程序和 API 的首选 HTTP 客户端。

总的来说，Axios 是一个功能强大、易于使用且灵活的 HTTP 客户端，它能够帮助开发者以简洁和高效的方式处理 HTTP 请求和响应。

怎么使用axios封装Ajax

使用 Axios 封装 AJAX 请求是一个常见的做法，它可以帮助你简化代码、统一请求格式和处理逻辑。以下是一个基本的 Axios 封装示例，包括请求和响应的拦截器、错误处理以及配置默认请求选项。

首先，你需要安装 Axios。如果你还没有安装它，可以使用 npm 或 yarn 进行安装：

npm install axios
# 或者
yarn add axios

然后，你可以创建一个新的文件（例如 axiosInstance.js）来封装 Axios 实例：

// axiosInstance.js
import axios from 'axios';
 
// 创建一个 Axios 实例
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com', // 你的 API 基础 URL
  timeout: 10000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json', // 默认请求头
  },
});
 
// 请求拦截器
axiosInstance.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么，例如添加认证令牌
    // config.headers.Authorization = `Bearer ${token}`;
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);
 
// 响应拦截器
axiosInstance.interceptors.response.use(
  response => {
    // 对响应数据做点什么，例如统一处理错误状态码
    if (response.status >= 200 && response.status < 300) {
      return response.data; // 返回实际数据
    } else {
      // 处理错误响应，例如显示错误消息或抛出错误
      return Promise.reject(new Error(response.statusText));
    }
  },
  error => {
    // 对响应错误做点什么，例如显示错误消息或抛出错误
    if (error.response) {
      // 服务器返回了一个状态码，且状态码触发了错误处理
      console.error('Error Response:', error.response.data);
      console.error('Error Status:', error.response.status);
      console.error('Error Headers:', error.response.headers);
    } else if (error.request) {
      // 请求已经发出，但没有收到响应
      console.error('Error Request:', error.request);
    } else {
      // 其他错误（例如，设置请求时发生的错误）
      console.error('Error Message:', error.message);
    }
    return Promise.reject(error);
  }
);
 
// 导出 Axios 实例
export default axiosInstance;

现在，你可以在你的应用程序中使用这个封装的 Axios 实例来发送 AJAX 请求。例如：

// someComponent.js 或 anyOtherFile.js
import axiosInstance from './axiosInstance';
 
// 发送一个 GET 请求
axiosInstance.get('/some-endpoint')
  .then(data => {
    console.log('Data:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });
 
// 发送一个 POST 请求
axiosInstance.post('/another-endpoint', { key: 'value' })
  .then(data => {
    console.log('Data:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

这个封装示例提供了基本的功能，但你可以根据需要进行扩展。例如，你可以添加更多的请求拦截器来处理身份验证令牌、全局错误处理逻辑、请求重试机制等。

该如何使用Axios 封装 XHR 请求

实际上，Axios 本身就是一个基于 Promise 的 HTTP 客户端，它已经在内部封装了 XMLHttpRequest (XHR) 的复杂细节，因此你不需要直接使用或封装 XHR。使用 Axios，你可以更方便地发送 HTTP 请求，并处理响应和错误。

不过，如果你想要了解如何使用 Axios 来替代传统的 XHR 请求，或者想要在你的项目中通过 Axios 来封装一些常用的请求逻辑，以下是一个基本的指南：

安装 Axios：
首先，你需要确保你的项目中已经安装了 Axios。如果还没有安装，可以使用 npm 或 yarn 进行安装。

npm install axios
# 或者
yarn add axios

创建 Axios 实例（可选）：
你可以创建一个 Axios 实例来配置一些默认的设置，比如基础 URL、超时时间、请求头等。这类似于传统 XHR 中的“打开”一个连接并设置请求头。

const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {'X-Custom-Header': 'foobar'}
});

发送请求：
使用 Axios 的方法（如 get、post、put、delete 等）来发送 HTTP 请求。这些方法会返回一个 Promise，你可以使用 .then() 和 .catch() 来处理响应和错误。

// 使用默认的 axios
axios.get('/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching users:', error);
  });
 
// 使用自定义的 axios 实例
axiosInstance.post('/users', {
  name: 'John Doe',
  email: 'john.doe@example.com'
})
  .then(response => {
    console.log('User created:', response.data);
  })
  .catch(error => {
    console.error('Error creating user:', error);
  });

配置拦截器（可选）：
你可以配置请求拦截器和响应拦截器来在请求发送之前或响应到达之后执行一些逻辑。这类似于传统 XHR 中的“设置请求头”和“处理响应”。

axiosInstance.interceptors.request.use(config => {
  // 在发送请求之前做些什么，比如添加认证 token
  const token = localStorage.getItem('token');
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`;
  }
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});
 
axiosInstance.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response.data;
  },
  error => {
    // 对响应错误做些什么
    if (error.response) {
      // 处理 HTTP 状态码错误
    }
    return Promise.reject(error);
  }
);

处理响应和错误：
使用 .then() 方法来处理成功的响应，使用 .catch() 方法来处理错误。你也可以使用 async/await 语法来更简洁地处理异步请求。

async function fetchUsers() {
  try {
    const response = await axiosInstance.get('/users');
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching users:', error);
  }
}
 
fetchUsers();