干货分享：Axios vs. Fetch API，你该选哪个？

于 2024-07-28 11:18:28 发布
阅读量68 收藏 1
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ed7zgeE9X/article/details/140761780
版权

fe345f3270400f33d9ceaa3de4815eab.jpeg

在前端开发中，与远程服务器无缝互动并通过网络交换数据是必不可少的一环。不论是从API获取数据、执行CRUD操作，还是处理其他网络相关任务，HTTP请求的重要性不言而喻。为了让开发者更轻松地处理HTTP请求，JavaScript社区中诞生了两个非常流行的库：Axios和Fetch。

那么，究竟哪个工具更适合你的项目需求呢？今天，我们就来深度解析Axios和Fetch的优缺点，看看它们在不同任务中的表现如何。通过这篇文章，你不仅能全面了解这两种API的使用方法，还能更有信心地选择适合自己的工具。准备好了吗？让我们一起开始吧！

Axios——功能强大的第三方库

Axios是一个第三方的HTTP客户端库，用于发起网络请求。它基于Promise，提供了一个干净且一致的API来处理请求和响应。

你可以通过内容分发网络（CDN）或使用包管理器（如npm）将其添加到项目中。Axios的一些核心功能包括：在浏览器中发起XMLHttpRequests、在Node.js环境中发起HTTP请求、取消请求以及拦截请求和响应。

Axios的主要特点：

  1. 在浏览器中发起XMLHttpRequests

  2. 在Node.js中发起HTTP请求

  3. 请求取消功能

  4. 请求和响应的拦截器

Fetch——现代浏览器的内置API

Fetch也是一个基于Promise的HTTP客户端API。由于它是内置的，所以我们不需要安装或导入任何东西。Fetch在所有现代浏览器中都可用，你可以在caniuse上查看其支持情况。Fetch在Node.js中也可用——你可以在这里了解更多信息。

Fetch的主要特点：

  1. 内置API，无需额外安装

  2. 现代浏览器中可用

  3. 在Node.js中可用

一、基础语法

使用Axios发送POST请求

Axios 提供了一个链式API，使得配置请求参数如 headers、data 和请求方法变得非常简单。它会自动将数据转换为 JSON 格式，省去了手动处理的麻烦。

const axios = require('axios');

const url = 'https://api.example.com/posts';
const data = {
  title: '你好，世界',
  body: '这是一条测试内容。',
  userId: 1,
};

axios
  .post(url, data, {
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json;charset=UTF-8',
    },
  })
  .then(({ data }) => {
    console.log("POST请求成功，响应数据:", data);
  })
  .catch(error => {
    console.error('请求出错:', error);
  });

使用Fetch发送POST请求

Fetch API 是 JavaScript 内置的，用来发起 HTTP 请求。虽然 Fetch 比较灵活，但是需要更多的手动操作，比如需要手动转换响应数据为 JSON。

const url = "https://api.example.com/posts";

const options = {
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json;charset=UTF-8",
  },
  body: JSON.stringify({
    title: "你好，世界",
    body: "这是一条测试内容。",
    userId: 1,
  }),
};

fetch(url, options)
  .then((response) => response.json())
  .then((data) => {
    console.log("POST请求成功，响应数据:", data);
  })
  .catch(error => {
    console.error('请求出错:', error);
  });

对比分析

  1. 数据发送方式：

  • Axios 使用 data 属性来发送数据。

  • Fetch 使用 body 属性来发送数据，并且需要手动将数据转换成 JSON 字符串。

响应数据处理：

  • Axios 自动将服务器响应数据转换为 JSON 对象。

  • Fetch 需要手动调用 response.json() 方法来解析响应数据。

便捷性：

  • Axios 自动处理很多细节，比如响应数据的转换，错误处理等，更加方便易用。

  • Fetch 则提供了更灵活的配置选项，但需要开发者写更多代码来处理响应数据和错误。

二、错误处理

在进行 HTTP 请求时，处理响应和错误是开发中非常重要的一部分。Fetch 和 Axios 在这方面各有优劣。接下来，我们将分别用这两种工具来实现一个 GET 请求，并比较它们的错误处理方式。

使用Fetch处理GET请求和错误

Fetch 提供了对加载过程的精确控制，但同时也增加了复杂性。它需要处理两个 Promise，并且还要手动解析 JSON 数据。此外，Fetch 默认认为服务器返回的所有状态码（包括错误状态码如404）都是成功的，因此需要开发者手动检查 response.ok 属性来处理错误。

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP错误：${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('接收到的数据:', data);
  })
  
  .catch(error => {
    console.error('错误信息:', error.message);
  });

使用Axios处理GET请求和错误

Axios 简化了响应的处理，直接提供了 data 属性。同时，它会自动拒绝状态码不在200-299范围内的响应（即非成功响应）。使用 .catch() 块可以方便地获取错误信息，包括是否收到了响应以及响应的状态码。

const axios = require("axios");

axios
  .get("https://api.example.com/data")
  .then((response) => {
    console.log("接收到的数据:", response.data);
  })
  .catch((error) => {
    if (error.response) {
      console.error(`HTTP错误：${error.response.status}`);
    } else if (error.request) {
      console.error("请求错误：未收到响应");
    } else {
      console.error("错误信息:", error.message);
    }
  });

对比分析

  1. 错误处理机制：

  • Fetch 默认认为所有响应都是成功的，需要手动检查 response.ok 属性。

  • Axios 自动拒绝非成功状态码的响应，更加简化了错误处理。

响应数据解析：

  • Fetch 需要手动调用 response.json() 方法来解析 JSON 数据。

  • Axios 自动将响应数据解析为 JSON 对象，并通过 response.data 提供访问。

错误信息获取：

  • Fetch 在 .catch() 块中只能捕获网络错误或代码中的错误，需手动抛出 HTTP 错误。

  • Axios 在 .catch() 块中可以获取详细的错误信息，包括响应和请求的详细情况。

三、拦截HTTP请求和响应

Axios 的一个重要特性是能够拦截 HTTP 请求和响应。HTTP 拦截器在需要检查或修改从应用程序到服务器的 HTTP 请求或从服务器到应用程序的响应时非常有用。这一功能对于日志记录、身份验证或重试失败的 HTTP 请求等任务非常重要。

通过使用拦截器，你不需要为每个 HTTP 请求单独编写代码。HTTP 拦截器有助于设置一个全局策略，处理所有的请求和响应。

使用Axios拦截HTTP请求

const axios = require("axios");

// 注册请求拦截器
axios.interceptors.request.use((config) => {
  // 在发送任何 HTTP 请求之前记录一条消息
  console.log("请求已发送");
  return config;
});

// 发送GET请求
axios
  .get("https://api.example.com/data")
  .then(({data}) => {
    console.log("接收到的数据:", data);
  })
  .catch((error) => {
    console.error("错误信息:", error.message);
  });

在这段代码中，axios.interceptors.request.use() 方法用于定义在发送 HTTP 请求之前运行的代码。此外，axios.interceptors.request.use() 还可以用来拦截服务器的响应。例如，在发生网络错误时，可以使用响应拦截器重试相同的请求。

使用Fetch拦截HTTP请求

默认情况下，fetch() 没有提供拦截请求的方法，但可以通过重写全局 fetch() 方法来实现拦截器功能。

fetch = ((originalFetch) => {
  return (...args) => {
    return originalFetch.apply(this, args).then((response) => {
      if (!response.ok) {
        throw new Error(`HTTP错误：${response.status}`);
      }
      console.log("请求已发送");
      return response;
    });
  };
})(fetch);

fetch("https://api.example.com/data")
  .then((response) => response.json())
  .then((data) => {
    console.log("接收到的数据:", data);
  })
  .catch((error) => {
    console.error("错误信息:", error.message);
  });

对比分析

  1. 代码简洁性：

  • Axios 提供了内置的拦截器支持，代码更加简洁。

  • Fetch 需要手动重写全局方法，代码略显冗长。

功能性：

  • Axios 拦截器功能强大，可以在请求和响应阶段进行操作。

  • Fetch 通过重写方法实现拦截，灵活性较高，但代码复杂度增加。

错误处理：

  • Axios 自动处理 HTTP 错误并抛出异常，便于统一处理。

  • Fetch 需要手动检查响应状态码，并抛出异常。

通过以上对比可以看出，使用 Axios 可以更加简化拦截和错误处理的代码，更加便于维护。而 Fetch 提供了更高的灵活性，但需要更多的手动处理。

四、响应超时处理

响应超时是比较 Fetch 和 Axios 的另一个重要方面。响应超时指的是客户端等待服务器响应的时长，超过这个时间后请求将被视为失败。

在 Axios 中设置超时非常简单，只需在配置对象中使用 timeout 属性即可。这种简便的方法使得开发者可以在请求配置中直接定义超时持续时间，提供了更大的控制和易用性。

使用Axios设置响应超时

const axios = require('axios');

// 定义超时持续时间（毫秒）
const timeoutDuration = 5000; // 5秒

// 创建配置对象并设置超时属性
const config = {
  timeout: timeoutDuration
};

// 发送带有超时设置的GET请求
axios.get('https://api.example.com/items', config)
  .then(response => {
    console.log('接收到的数据:', response.data);
  })
  .catch(error => {
    console.error('获取数据出错:', error.message);
  });

在这个示例中，我们使用 Axios 发送了一个 GET 请求，并将配置对象作为第二个参数传递以指定超时。如果请求成功，接收到的数据将被记录到控制台。如果请求过程中发生错误或超时，错误信息将被记录到控制台。

使用Fetch设置响应超时

Fetch 提供了类似的功能，但需要使用 AbortController 接口，这比 Axios 的实现稍微复杂一些。

const timeoutDuration = 5000; // 5秒
// 创建一个AbortController实例
const controller = new AbortController();
const signal = controller.signal;

// 设置定时器，在指定时间后中止请求
const timeoutId = setTimeout(() => {
  controller.abort();
}, timeoutDuration);

// 发送带有超时设置的GET请求
fetch('https://api.example.com/items', { signal })
  .then(response => {
    if (!response.ok) {
      throw new Error('网络响应不正常');
    }
    return response.json();
  })
  .then(data => {
    console.log('接收到的数据:', data);
  })
  .catch(error => {
    // 检查错误是否由于请求被中止
    if (error.name === 'AbortError') {
      console.error('请求超时');
    } else {
      console.error('获取数据出错:', error.message);
    }
  })
  .finally(() => {
    // 清除定时器，防止请求完成后定时器继续运行
    clearTimeout(timeoutId);
  });

在这个示例中，我们为 fetch 请求设置了 5 秒的超时时间，并创建了一个 AbortController 实例来在超时后取消请求。通过 setTimeout 启动一个定时器，在指定时间后中止请求。然后，发送包含中止信号的 fetch 请求。响应后，检查请求是否成功并解析数据。管理超时等错误情况。最后，清除定时器以避免请求完成后不必要的延迟。

对比分析

  1. 代码简洁性：

  • Axios 提供了内置的超时设置，代码更加简洁。

  • Fetch 需要使用 AbortController 和定时器来实现超时功能，代码略显复杂。

功能性：

  • Axios 允许在配置对象中直接设置超时，方便控制。

  • Fetch 通过 AbortController 实现超时，提供了更高的灵活性，但实现较为复杂。

错误处理：

  • Axios 自动处理超时错误，并在请求超时时抛出异常。

  • Fetch 需要手动检查请求是否被中止，并处理相应的错误。

通过以上对比可以看出，对于初学者来说，使用 Axios 可以更加简化超时处理的代码，更加便于维护。而 Fetch 提供了更高的灵活性，但需要更多的手动处理。

五、同时发送多个请求

同时发送多个请求，或并发请求，是比较 Fetch 和 Axios 的另一个重要方面。在性能和响应速度至关重要的应用中，这个功能尤为重要。

使用Axios同时发送多个请求

Axios 提供了 axios.all() 方法来发送多个并发请求。只需将请求数组传递给这个方法，然后使用 axios.spread() 来将响应展开为单独的参数，从而可以分别处理每个响应。

const axios = require('axios');

// 定义请求的基础URL
const baseURL = 'https://api.example.com/resources';

// 定义请求的URL
const urls = [
  `${baseURL}/1`,
  `${baseURL}/2`,
  `${baseURL}/3`
];

// 创建一个Axios请求promise的数组
const axiosRequests = urls.map(url => axios.get(url));

// 使用`axios.all()`同时发送多个请求
axios.all(axiosRequests)
  .then(axios.spread((...responses) => {
    // 处理所有请求的响应
    responses.forEach((response, index) => {
      console.log(`来自${urls[index]}的响应:`, response.data);
    });
  }))
  .catch(error => {
    console.error('获取数据出错:', error.message);
  });

使用Fetch同时发送多个请求

要使用 Fetch 实现同样的功能，需要依赖内置的 Promise.all() 方法。将所有 fetch 请求作为数组传递给 Promise.all()，然后使用异步函数处理响应。

// 定义请求的基础URL
const baseURL = "https://api.example.com/resources";

// 定义请求的URL
const urls = [`${baseURL}/1`, `${baseURL}/2`, `${baseURL}/3`];

// 创建一个存储fetch请求promise的数组
const fetchRequests = urls.map((url) => fetch(url));

// 使用`Promise.all()`同时发送多个请求
Promise.all(fetchRequests)
  .then((responses) => {
    // 处理所有请求的响应
    responses.forEach((response, index) => {
      if (!response.ok) {
        throw new Error(
          `请求 ${urls[index]} 失败，状态码为 ${response.status}`
        );
      }
      response.json().then((data) => {
        console.log(`来自${urls[index]}的响应:`, data);
      });
    });
  })
  .catch((error) => {
    console.error("获取数据出错:", error.message);
  });

对比分析

  1. 代码简洁性：

  • Axios 提供了内置的方法 axios.all() 和 axios.spread()，使得代码更加简洁易读。

  • Fetch 需要使用 Promise.all() 并手动处理每个响应，代码略显复杂。

响应处理：

  • Axios 使用 axios.spread() 将响应展开为单独的参数，可以更方便地处理每个响应。

  • Fetch 需要在 Promise.all() 之后手动解析每个响应的 JSON 数据，增加了额外的复杂性。

错误处理：

  • Axios 自动处理每个请求的错误，并在并发请求时统一捕获错误。

  • Fetch 需要手动检查每个响应的状态码，并在解析 JSON 数据时处理可能的错误。

六、向后兼容性

向后兼容性指的是软件系统或产品即使在使用旧版本的依赖或旧环境时，也能正常或有效地运行的能力。

Axios的向后兼容性

Axios 提供了更好的开箱即用的向后兼容性，并提供了额外的功能以便与旧系统或代码库兼容。Axios 的一个主要卖点是其广泛的浏览器支持，由于其使用 XMLHttpRequest，因此即使在 IE11 等旧版浏览器中也能兼容。

Fetch的向后兼容性

相比之下，Fetch 的浏览器支持更有限，主要面向现代浏览器如 Chrome、Firefox、Edge 和 Safari。如果项目需要在不支持的浏览器中使用 Fetch 的功能，可以集成一个 polyfill，例如 whatwg-fetch，来弥补这个差距。这个 polyfill 可以扩展 Fetch 的支持到旧版浏览器，确保兼容性。

首先，通过 npm 安装 polyfill：

npm install whatwg-fetch --save

然后，可以这样使用 Fetch 进行请求：

import 'whatwg-fetch';

const baseURL = 'https://api.mywebsite.com/data';

// 发送GET请求
window.fetch(`${baseURL}/item`)
  .then(response => {
    if (!response.ok) {
      throw new Error('网络响应不正常');
    }
    return response.json();
  })
  .then(data => {
    console.log('接收到的数据:', data);
  })
  .catch(error => {
    console.error('获取数据出错:', error.message);
  });

请注意，在某些旧版浏览器中，你可能还需要一个 Promise 的 polyfill。

对比分析

  1. 向后兼容性：

  • Axios 由于使用 XMLHttpRequest，可以在包括 IE11 在内的更旧的浏览器中使用。

  • Fetch 主要面向现代浏览器，需要使用 polyfill 才能在旧版浏览器中使用。

安装和使用：

  • Axios 不需要额外的配置即可在旧浏览器中使用。

  • Fetch 需要安装 whatwg-fetch polyfill，并可能需要 Promise polyfill，以确保在旧版浏览器中的兼容性。

结束

总的来说，Axios 以其简单、强大和广泛的浏览器支持脱颖而出，特别适合那些需要兼容旧版浏览器的项目。另一方面，Fetch 提供了更原生的方式，直接内置于浏览器中，支持流处理等功能，并能无缝配合其他Web平台API。

在选择 Axios 和 Fetch 时，开发者应仔细评估项目需求，包括易用性、性能考虑、浏览器兼容性以及所需的额外功能。

那么，小伙伴们，你们更倾向于使用 Axios 还是 Fetch 呢？有没有在项目中遇到过需要兼容旧版浏览器的情况？你们又是如何解决的呢？欢迎在评论区分享你们的经验和见解，我们一起讨论、学习！如果你觉得这篇文章对你有帮助，别忘了点赞、收藏并分享给更多的朋友哦！关注我们，获取更多实用的前端开发技巧和资讯！

前端达人
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用axios +vue php 实现前后端分离数据交互
qq_43994840的博客
05-28 1072
** 使用axios +vue php 实现前后端分离数据交互 ** 环境配置： PhpStorm（php环境） vue（webstorm） axios是个啥有啥作用 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征： 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XS
「干货」Web前端基础三剑客学习知识分享
m0_60196730的博客
07-22 144
二.技术基础知识 基础知识一直都是重点考察的内容，包含有HTML（5）、CSS（3）、JavaScript到Vue，React等等所有可能考察的知识。 基础知识不仅仅要知道是什么，更要明白怎么用，为什么这么用。死记硬背能应付一时，如果你遇到了想深入聊聊的面试官，死记硬背就没用了。所以每个知识点都要理解透彻，讲的清楚。 每次面试都要提前做好准备，下面是一些常考的面试知识点，大家可以提前准备 HTML(5)： 1）H5的新特性有哪些？ 2）Label的作用是什么？是怎么用的？ 3）HTML5的form如何关闭自
干货分享：vue2.0做移动端开发用到的相关插件和经验总结
weixin_30715523的博客
11-27 200
最近在用vue2.0做微信公众号相关的前端开发，经过这次开发实践，现将项目中用到的相关比较实用的插件及遇到的相关问题进行整理，希望和大家共同交流...... cssrem：一个CSS值转REM的VSCode插件； lib-flexible：移动端弹性布局适配解决方案； vue-touch：移动端相关点击，滑动，拖动，多点触控等事件封装； vee-validate：适用于vue项目中...
干货分享：vue2.0做移动端开发用到的相关插件和经验总结(更新)
weixin_34405925的博客
09-11 331
最近在用vue2.0做微信公众号相关的前端开发，经过这次开发实践，现将项目中用到的相关比较实用的插件及遇到的相关问题进行整理，希望和大家共同交流......cssrem：一个CSS值转REM的VSCode插件；lib-flexible：移动端弹性布局适配解决方案；vue-touch：移动端相关点击，滑动，拖动，多点触控等事件封装；vee-validate：适用于vue项目中表单验证插件；bette...
ajax、axios、fetch之间的区别与联系
2401_84153038的博客
04-18 947
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！
工作两年，你有没有觉得很吃力？(干货经验分享)
画漫画的程序员∙苏南
05-07 167
点击上方“蓝色字体”，选择“设为星标”做积极向上的前端人！转自：知乎https://www.zhihu.com/question/425782106/answer/1543007211前言...
axios formdata提交_vue中简单的axios二次封装
weixin_39528559的博客
11-22 508
关注“前端学苑” ，坚持每天进步一点点「~axios封装~」前端技术真是一个发展飞快的领域，jquery的时代，那时用的是 ajax 来处理数据请求。现在vue时代已经到来，axios 和 fetch都已经开始分别抢占“请求”这个前端高地。本文将会尝试着阐述他们之间的区别，并给出自己的一些理解。一、ajax, Axios, Fetch区别：1、JQuery ajax (廉颇老矣，尚能饭...
v3 微信api 请求微信_一文搞懂微信支付 Api-v3 规则实现(附源码)
weixin_39748445的博客
12-21 1855
v2 与 v3 的区别先看看 v2 与 v3 的区别，做到心中有数不怯场:)规则差异JSON参数格式XMLPOST、GET 或 DELETE提交方式POSTAES-256-GCM加密回调加密无需加密RSA 加密敏感加密无需加密UTF-8编码方式UTF-8非对称密钥SHA256-RSA签名方式MD5 或 HMAC-SHA256微信支付Api-v3 规则 官方文档 ，此规则需要你耐心细品，重复多此细品...
react调用api等待返回结果_use SWR为什么能成为我的最爱React库？
weixin_39748183的博客
11-19 228
全文共2355字，预计学习时长12分钟图源：unsplash在过去的几个月里，我一直在开发Next JS应用程序。应用程序使用axiosto进行API调用，然后用unstated next作为状态解决方案。有很多API调用，我们不希望用户体验太多加载屏幕。因此，我们将axios调用的结果存储在未声明的存储中。但我们遇到了一个问题，商店本身变得越来越复杂。这是有些页面依赖于几个API调用，有些API...
axios0.27.2（axios.js）
06-07
axios0.27.2（axios.js）
axios.min.js（ 0.26.0）
02-21
axios.min.js版本：0.26.0
axios0.27.2（axios.min.js）
06-07
axios0.27.2（axios.min.js）
axios-fetch-adapter:提取适用于axios的适配器
05-10
但是，Axios目前没有用于提取API的适配器。 因此，我在等待Axios正式发布时编写了一个供使用。 安装及使用 您可以直接从此存储库URL安装适配器，也可以随时将其源代码复制到您的项目中。 npm install axios npm ...
javascript-axios:使用AXIOS（HTTP库）和JSON占位符APIJavaScript Fetch API速成课程
03-27
尽管Fetch API更符合现代编程风格，但AXIOS在某些情况下可能更适合，例如，当你需要取消请求、自定义请求头或者处理跨域请求时。此外，AXIOS对于错误处理更加直观，因为它会在请求失败时直接抛出错误，而Fetch API则...
守望先锋资讯小程序(源码).zip
07-28
守望先锋资讯小程序(源码).zip
无人智能化关键技术及其在火炮系统中的应用_常建龙.caj
最新发布
07-28
无人智能化关键技术及其在火炮系统中的应用_常建龙
本科设计-机器学习识别图片验证码-可执行内含文档代码-可执行内含文档代码.zip
07-28
本科设计-机器学习识别图片验证码-可执行内含文档代码-可执行内含文档代码.zip
【2023】智能网联汽车数据安全合规白皮书-路特斯科技&普华永道_43页.pdf
07-28
【2023】智能网联汽车数据安全合规白皮书-路特斯科技&普华永道_43页.pdf
vue axios对个别接口不需要全局拦截怎么处理_从0到1使用VUE-CLI3开发实战（四）: Axios封装...
06-10
如果你在Vue项目中使用Axios进行接口请求，并且需要对个别接口进行特殊处理，可以在封装Axios的时候进行处理。 一种常见的做法是，在封装Axios的时候，给每个请求都添加一个标识符（比如在请求参数中添加一个特殊的字段），然后在请求拦截器中判断是否需要进行特殊处理，如果需要，就不进行全局拦截。 以下是一个简单的示例： ```javascript // 封装Axios import axios from 'axios' const instance = axios.create({ baseURL: 'http://api.example.com', timeout: 5000 }) // 在请求拦截器中判断是否需要全局拦截 instance.interceptors.request.use(config => { // 如果需要全局拦截，就添加token等信息 if (config.headers.needToken) { const token = localStorage.getItem('token') if (token) { config.headers.Authorization = 'Bearer ' + token } } return config }, error => { return Promise.reject(error) }) export default instance ``` 在上面的代码中，我们给每个请求添加了一个特殊的请求头字段 `needToken`，如果需要进行全局拦截，就在请求拦截器中添加token等信息。 如果某个接口不需要进行全局拦截，就不需要添加 `needToken` 字段，这样就不会被全局拦截器拦截。 ```javascript // 发送请求 import axios from './axios' // 不需要全局拦截的接口 axios.get('/user', { params: { id: 123 } }).then(res => { console.log(res) }) // 需要全局拦截的接口 axios.get('/user', { params: { id: 123 }, headers: { needToken: true } }).then(res => { console.log(res) }) ``` 在上面的代码中，第一个请求不需要进行全局拦截，因此不需要添加 `needToken` 字段；第二个请求需要进行全局拦截，因此添加了 `needToken` 字段。这样就可以对个别接口进行特殊处理了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值