前端发送请求之fetch跟axios的区别

本文讲述了前端开发工程师在UI设计还原后如何通过Fetch和Axios发送请求获取后端数据,比较了两者在API设计、兼容性和错误处理上的差异,以及如何通过polyfill处理Fetch的浏览器兼容问题。

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

        常见的发送请求的方式是:Fecth,Axios

        以下概念来自AI

Fecth与Axios的区别:

API的设计:

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

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

兼容性:

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

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

错误处理:

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

        

### 如何在前端项目中使用Axios发送HTTP请求 #### 安装Axios 为了能够在前端项目中使用Axios,首先需要安装这个库。可以通过npm或yarn来完成这一操作。 ```bash npm install axios --save ``` 或者 ```bash yarn add axios ``` #### 配置全局Axios实例 为了让整个应用都能方便地访问到相同的Axios配置,在`main.js`文件中可以创建并导出一个带有默认设置的Axios实例[^2]: ```javascript import Vue from 'vue'; import App from './App.vue'; import axios from 'axios'; // 设置基础URL和其他通用选项 axios.defaults.baseURL = 'https://api.example.com/'; axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('token')}`; Vue.prototype.$http = axios; new Vue({ render: h => h(App), }).$mount('#app'); ``` 这样做的好处是可以集中管理所有的API调用参数,并且可以在一处修改影响所有地方使用的这些参数。 #### 发送GET请求 当想要获取数据时,通常会采用GET方法来进行网络请求。以下是两种不同的方式来实现这一点[^3]: ##### 方法一:直接通过函数形式发起请求 ```javascript this.$http.get('/path/to/resource') .then(response => { console.log(response.data); }) .catch(error => { console.error("There was an error!", error); }); ``` ##### 方法二:利用Promise链式调用来处理异步逻辑 ```javascript const fetchData = async () => { try { let response = await this.$http.get('/path/to/resource'); console.log(response.data); } catch (error) { console.error("Error fetching data", error); } }; fetchData(); ``` 这两种方法都可以有效地发出GET请求;选择哪种取决于个人偏好以及项目的具体需求。 #### 发送POST请求 对于提交表单或者其他类型的上传操作,则应该考虑使用POST请求。下面展示了如何构建这样的请求: ```javascript let formData = new FormData(); formData.append('key1', value1); formData.append('key2', value2); this.$http.post('/submit-endpoint/', formData, { headers: {'Content-Type': 'multipart/form-data'} }) .then((response) => { console.log(response.data.message); // 假设服务器响应中有message字段 }) .catch((error) => { console.error("Failed to submit form.", error); }); ``` 以上就是关于如何在一个基于Vue框架的前端应用程序中集成和使用Axios进行基本的HTTP通信的一些指导说明。
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小灰灰学编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值