前端发送请求之fetch跟axios的区别，前端请求技术，Fetch与Axios的区别解析

摘要：，，本文探讨了前端开发中常用的两种请求方式：fetch和axios。它们之间的主要区别在于fetch是浏览器原生的API，使用起来相对较为简单，但返回的是Promise对象，需要手动处理一些细节。而axios则是一个基于Promise的HTTP库，提供了更丰富的功能，如拦截请求和响应、转换请求和响应数据等。相较于fetch，axios更加灵活和强大，但也需要更多的配置和学习成本。在选择使用哪种方式时，开发者需要根据项目的具体需求和团队的熟悉程度进行权衡。

        前端开发工程师在针对页面UI设计稿还原之后，还需要与后端开发工程师进行接口对接，发送请求获取后端接口数据后进行逻辑处理呈现给用户。

        常见的发送请求的方式是：Fecth，Axios

        以下概念来自AI

Fecth与Axios的区别：

API的设计：

        Fetch API是基于浏览器内置的 window.fetch 函数，使用起来较为简单，但有些功能需要手动处理，比如对错误的处理。

        Axios 是一个单独的库，提供了更丰富的功能和更方便的API，例如自动处理JSON数据、请求和响应拦截器等。

兼容性：

        Fetch API 在现代浏览器中得到良好支持，但在一些老旧的浏览器中可能需要使用 polyfill 进行兼容处理。

        Axios 兼容性更好，在各种环境中都可以使用，并提供了一致的API。

错误处理：

        在Fetch API中，需要手动检查HTTP响应状态码并处理错误。

        Axios 提供了更简便的错误处理机制，可以通过 .catch 来捕获错误。

举例说明：

Fetch API

// 用例一
fetch(url, {
  method: 'GET', // 请求方法
  headers: {
    'Content-Type': 'application/json', // 请求头
    // 其他自定义请求头
  },
  body: JSON.stringify(data), // 请求体，通常用于 POST 或 PUT 请求
})
.then(response => response.json()) // 处理响应数据
.then(data => {
  // 处理获取到的数据
})
.catch(error => {
  // 处理错误
});
// 用例二
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
  console.log(data);
})
.catch(error => {
  console.error('Error:', error);
});

Axios

// 用例一
axios({
  method: 'GET', // 请求方法
  url: 'https://api.example.com/data', // 请求地址
  headers: {
    'Content-Type': 'application/json', // 请求头
    // 其他自定义请求头
  },
  data: requestData, // 请求体，通常用于 POST 或 PUT 请求
})
.then(response => {
  // 处理响应数据
  console.log(response.data);
})
.catch(error => {
  // 处理错误
  console.error('Error:', error);
});
// 用例二
axios.get('https://api.example.com/data')
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('Error:', error);
});

Fetch兼容性处理：使用 polyfill 来提供 fetch 的兼容性

使用 polyfill 对 fetch 进行兼容处理的步骤：

1、选择一个 polyfill 库

有很多库提供了 fetch 的 polyfill，例如 github.com/github/fetch。

2、引入 polyfill

在你的项目中，你可以通过  标签或模块导入的方式来引入这个 polyfill。

例如，使用  标签：

或者使用模块导入（例如，在 Node.js 或现代浏览器中）：

import 'exports-loader?self.fetch!exports-loader?self.Headers!exports-loader?self.Request!exports-loader?self.Response!github:github/fetch';

3、使用Fetch 

一旦你引入了 polyfill，你就可以在你的代码中使用 fetch 了，而不用担心它是否受支持。

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));