[前端]HTTP库Axios

码农丁丁2024-12-24 16:42

一、Axios简介

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js 环境。它是一个流行的 JavaScript 库，用于发起 HTTP 请求，如 GET、POST、DELETE 等。Axios 提供了易于使用的 API，支持请求和响应的拦截、转换数据格式、客户端支持防御 XSRF（跨站请求伪造）等功能。

以下是 Axios 的一些主要特点：

  1. 从浏览器中创建 XMLHttpRequests：

    允许从前端 JavaScript 代码中发送异步HTTP请求。

  2. 从 node.js 发出 http 请求：

    在服务器端环境中，Axios 可以用于发送 HTTP 请求。

  3. 支持 Promise API：

    Axios 提供了基于 Promise 的接口，使得异步请求的处理更加方便。

  4. 转换请求和响应数据：

    自动转换 JSON 数据结构，也可以自定义转换函数。

  5. 客户端支持防御 XSRF：

    Axios 可以配置来防御跨站请求伪造攻击。

  6. 拦截请求和响应：

    允许在请求发送前后或响应返回前后执行拦截操作。

  7. 取消请求：

    提供了取消请求的能力，可以用于防止不必要的网络请求。

  8. 自动转换 JSON：

    Axios 会自动将请求和响应数据转换为 JSON。

  9. 客户端支持防御 XSRF：

    Axios 可以配置来防御跨站请求伪造攻击。

以下是 Axios 的基本使用示例：

复制代码 
// 发送 GET 请求
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error during fetching:', error);
  });

// 发送 POST 请求
axios.post('https://api.example.com/data', {
    title: 'Example Title',
    body: 'This is a new post.',
    userId: 1
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error during posting:', error);
  });

// 使用 async/await
async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log(response.data);
  } catch (error) {
    console.error('Error during fetching:', error);
  }
}

要使用 Axios，你可以通过 npm 或 yarn 来安装它：

复制代码 
npm install axios --save

或者

bash

复制代码 
yarn add axios

然后，在你的 JavaScript 代码中引入 Axios 并使用它发起请求。

二、Axios支持的数据格式转换

Axios 支持多种数据格式的转换，这使得在发送请求和接收响应时能够轻松地处理不同格式的数据。以下是 Axios 支持的一些常见数据格式转换：

  1. JSON：

    Axios 默认会将请求和响应数据转换为 JSON 格式。当你发送一个请求时，Axios 会自动将 JavaScript 对象序列化为 JSON 字符串。同样地，当接收到响应时，Axios 也会自动将 JSON 字符串解析为 JavaScript 对象。

  2. URL Encoded Format：

    对于表单数据，Axios 可以自动将 JavaScript 对象序列化为 application/x-www-form-urlencoded 格式，这通常用于 HTML 表单数据的提交。

  3. Text：

    如果你想要接收纯文本响应，可以在请求配置中设置 responseType 为 'text'，这样 Axios 就不会尝试解析响应内容。

  4. Blob：

    对于二进制数据，如文件下载，你可以设置 responseType 为 'blob'。这样，响应数据将作为 Blob 对象返回，可以用于创建文件或进行进一步的处理。

  5. Array Buffer：

    对于原始的二进制数据，可以设置 responseType 为 'arraybuffer'。这将返回一个 ArrayBuffer 对象，适用于处理二进制数据流。

  6. 自定义转换：

    Axios 允许你通过 transformRequest 和 transformResponse 配置项来添加自定义的数据转换函数。这些函数可以在发送请求之前和接收响应之后对数据进行处理。

以下是如何在 Axios 中设置 responseType 和自定义转换函数的示例：

复制代码 
// 设置响应类型为 blob
axios({
  url: 'https://api.example.com/file',
  method: 'get',
  responseType: 'blob' // 重要
}).then((response) => {
  // 处理 Blob 数据
  const url = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'filename.pdf');
  document.body.appendChild(link);
  link.click();
  link.parentNode.removeChild(link);
  window.URL.revokeObjectURL(url);
}).catch((error) => {
  console.error('Error during file download:', error);
});

// 自定义转换函数
axios({
  method: 'post',
  url: 'https://api.example.com/data',
  data: {
    title: 'Example Title',
    body: 'This is a new post.',
    userId: 1
  },
  transformRequest: [function (data, headers) {
    // 对 data 进行任意转换处理
    return data;
  }],
  transformResponse: [function (data) {
    // 对响应数据进行任意转换处理
    return data;
  }]
});

通过这些转换功能，Axios 提供了灵活的方式来处理各种类型的数据，满足不同场景下的需求。

三、Axios 处理跨域问题的方法

Axios 在发送请求时处理跨域问题主要有以下几种方法：

1、服务器端设置 CORS（跨源资源共享）：

跨域问题的根本解决方案是在服务器端配置 CORS 头。服务器需要设置 Access-Control-Allow-Origin 响应头，以允许特定的域名进行跨域请求。例如，在 Node.js 和 Express 框架中，可以安装 cors 中间件并使用它来允许跨域请求：

javascript 复制代码 
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors()); // 允许所有来源的跨域请求

如果需要更详细的配置，例如只允许特定的域名访问，可以这样配置：

javascript 复制代码 
app.use(cors({
  origin: 'http://localhost:8080', // 只允许从这个地址的跨域请求
  methods: ['GET', 'POST'], // 允许的 HTTP 方法
  allowedHeaders: ['Content-Type', 'Authorization'] // 允许的请求头
}));

2、开发环境中使用代理：

在开发环境中，可以使用 Webpack 开发服务器的代理功能来解决跨域问题。例如，在 Vue CLI 项目中，可以通过修改 vue.config.js 文件来设置代理：

javascript 复制代码 
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

这样，所有发往 /api 的请求都会被代理到 http://localhost:3000。

3、使用 JSONP：

JSONP 是一种只能支持 GET 请求的跨域解决方案。通过动态创建 <script> 标签来绕过同源策略的限制。

4、使用代理服务器：

在本地启动一个代理服务器，将请求转发到目标服务器，从而避免跨域问题。例如，使用 Node.js 和 Express 搭建一个简单的代理服务器：

javascript 复制代码 
const express = require('express');
const axios = require('axios');
const app = express();
const port = 3000;
app.use(express.json());
app.get('/api/data', async (req, res) => {
  try {
    const response = await axios.get('https://目标服务器的URL/data');
    res.json(response.data);
  } catch (error) {
    res.status(500).json({ error: 'Failed to fetch data from the target server' });
  }
});
app.listen(port, () => {
  console.log(`Proxy server is running on http://localhost:${port}`);
});

然后修改 Axios 请求地址，指向代理服务器即可：

javascript 复制代码 
axios.get('http://localhost:3000/api/users')

这些方法可以帮助开发者在使用 Axios 发送请求时解决跨域问题，确保请求能够成功到达目标服务器。

相关推荐
工控丫丫19 分钟前
帆软看板中经常使用的公式函数及经常搭的组合
前端·javascript·数据库
jerrywus39 分钟前
我用 GPT-6.1-sol 做了台会讲解的 3D 售货机：60 罐饮料，一口没喝上
前端·agent·claude
孟陬2 小时前
Foobar 技术周刊#159：当看不懂代码时，如何高效排障调试。脏页陷阱：一条只读查询，写入数 TB 数据。推测解码：大模型加速利器
前端·人工智能·后端
Zhao-Jichao2 小时前
AI Prompting for Everyone 课程笔记 - P17 图像生成 Imaging Generation
前端
Highcharts.js3 小时前
智能数据分析组件Orbit 正式发布与快速上手体验教程
前端·人工智能·信息可视化·数据分析系统·highcharts·orbit·智能可视化
螺丝钉tina3 小时前
[Playwright ][16]Playwright + TypeScript API 自动化测试实战：API测试
前端·javascript·typescript
Black蜡笔小新4 小时前
上云网关/端口穿透/设备上云EasyNTS：无需公网IP、也不改防火墙，设备怎么从内网跑到外网去
网络·网络协议·tcp/ip
小天源4 小时前
智叟云集系统 · 架构与职责分层
服务器·前端·数据库
Highcharts.js6 小时前
React 中原生支持使用 JSX 组件配置自定义表格 Highcharts Grid
前端·javascript·react.js·前端框架·jsx·highcharts·自定义表格
薛定谔的猫-菜鸟程序员6 小时前
Electron开发超详细教程（从入门到放弃）
前端·javascript·electron
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02历年考研数学一、数学二、数学三真题试卷及答案PDF03GitHub 镜像站点04几个好用的ip纯净度检测网站05昇腾910B系列芯片完全指南：四款型号对比、服务器选型与大模型部署实战06苹果iPA游戏软件资源下载网站07蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接08如何新建文件夹？ 电脑新建文件夹的4种方法09Dify：一站式AI应用开发平台全解析与Windows部署指南10Android 屏幕适配系列开篇：核心概念、官方机制与主流方案