用 Axios 提升前端异步请求的效率

最新推荐文章于 2025-09-07 22:29:54 发布

原创最新推荐文章于 2025-09-07 22:29:54 发布 · 1.4k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #react.js #javascript #前端框架

本文聚焦前端开发，介绍了 Axios 这一基于 promise 的 HTTP 客户端。阐述其安装方式，包括通过 npm 或 yarn 安装，还展示了基本使用、POST 请求、请求配置及拦截请求和响应的方法，掌握 Axios 可提升前端数据交互效率。

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

摘要：

本文介绍了 Axios 的基本概念、安装和使用方法，并通过实例演示了如何用 Axios 发送异步请求。通过掌握 Axios，开发者可以更加高效地进行前端数据交互。

引言：

随着互联网技术的不断发展，前端工程师需要不断与后端进行数据交互，以实现丰富的用户体验。在这个过程中，异步请求成为了一个重要的环节。Axios 是一款基于 promise 的 HTTP 客户端，用于浏览器和 node.js。它具有易用、灵活和高效的特点，成为了前端工程师必备的工具之一。

正文：

1. 安装 Axios

在项目中使用 Axios 之前，需要先安装它。可以通过 npm 或 yarn 进行安装：
📌 npm 安装：

npm install axios

📌 yarn 安装：

yarn add axios

2. 基本使用

Axios 的基本使用非常简单。下面是一个例子，展示了如何发送一个 GET 请求：

// 引入 Axios 库
import axios from 'axios';
// 发送 GET 请求
axios.get('https://api.example.com/data')
  .then(function (response) {
    // 处理成功情况
    console.log(response.data);
  })
  .catch(function (error) {
    // 处理错误情况
    console.log(error);
  })
  .then(function () {
    // 总是会执行
  });

3. POST 请求

发送 POST 请求也非常简单，只需要使用 axios.post() 方法。下面是一个实例：

axios.post('https://api.example.com/data', {
    firstName: 'Foo',
    lastName: 'Bar'
  })
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

4. 请求配置

Axios 允许我们对请求进行配置，包括请求方法、URL、参数等。下面是一个配置实例：

axios({
  method: 'get', // 默认是 get
  url: 'https://api.example.com/data',
  params: {
    ID: 12345
  }
})
.then(function (response) {
  console.log(response.data);
})
.catch(function (error) {
  console.log(error);
});

5. 拦截请求和响应

Axios 提供了请求拦截器和响应拦截器，我们可以通过它们来处理请求或响应前的逻辑。下面是一个拦截器实例：

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });