前端发送请求之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);
});
相关推荐
永乐春秋16 分钟前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿18 分钟前
【前端】CSS
前端·css
ggdpzhk20 分钟前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic6 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā6 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue