前端发送请求之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

javascript 复制代码
// 用例一
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

javascript 复制代码
// 用例一
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);
});
相关推荐
Boilermaker19921 小时前
【Java EE】SpringIoC
前端·数据库·spring
中微子1 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y2 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁2 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry2 小时前
Fetch 笔记
前端·javascript
拾光拾趣录2 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟2 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan2 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson2 小时前
青苔漫染待客迟
前端·设计模式·架构