Ajax的相关内容

一、Ajax的使用步骤

1.创建XML对象

const xhr=new XMLHttpRequest();

2.监听事件,处理响应

3.准备发送请求 true表示异步 ajax中永远是异步,永远是true

4.发送请求

二、GET和POST请求

三、JSON的三种形式

四、JSON的方法

五、跨域

六、XHR的属性和方法

七、FormData

八、axios

九、Fetch

十、axios和fetch区别

Axios 和 Fetch 都是用于在 JavaScript 中执行 HTTP 请求的工具,但它们有显著的区别和各自的特点。

Axios

  1. 定义与来源

• Axios 是一个基于 Promise 的 HTTP 客户端库,支持浏览器和 Node.js 环境。

• 是一个第三方库,需要通过 npm 或 CDN 引入使用。

  1. 主要特点

• 默认支持JSON处理:

• 请求数据会自动序列化为 JSON。

• 响应数据也会被自动解析为 JSON。

• 内置功能强大:

• 支持拦截器,可以在请求或响应前后添加逻辑(如鉴权、错误处理)。

• 自动管理请求的 headers。

• 自动处理 CSRF 保护(如果后端支持相关机制)。

• 易于处理错误:

• 在非 2xx 状态码下,Axios 会自动抛出异常,便于集中处理。

• 跨浏览器兼容性更好:

• Axios 在旧版浏览器中表现更稳定,因为它使用了 XMLHttpRequest,并封装了许多兼容性问题。

import axios from 'axios';

axios.get('https://api.example.com/data')

.then(response => console.log(response.data))

.catch(error => console.error(error));

Fetch

  1. 定义与来源

• Fetch 是浏览器内置的原生 API,基于 Promise,用于执行 HTTP 请求。

• 不需要引入额外的库,现代浏览器原生支持。

  1. 主要特点

• 轻量且原生:

• 直接使用,无需额外依赖。

• 灵活性高:

• 更接近底层,允许开发者控制请求的每个细节。

• 处理 JSON 需要手动解析:

• 响应默认返回 Response 对象,数据需要手动 .json() 转换。

• 错误处理有限:

• 只有在网络错误时才会抛出异常,4xx 和 5xx 状态码不会自动作为错误,需要手动检查。

• 不支持自动取消请求(可结合 AbortController 实现)。

fetch('https://api.example.com/data')

.then(response => {

if (!response.ok) {

throw new Error(`HTTP error! status: ${response.status}`);

}

return response.json();

})

.then(data => console.log(data))

.catch(error => console.error(error));

关系

• Axios 是对 Fetch 和 XMLHttpRequest 的封装:它封装了许多常见的场景(如拦截器、取消请求),使 HTTP 请求更便捷和一致。

• Fetch 是标准 API:作为现代浏览器的原生 API,Fetch 提供了底层的灵活性,但缺乏一些高级功能。

相关推荐
翻滚吧键盘15 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾20 分钟前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉28 分钟前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
秃了也弱了。34 分钟前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)1 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~1 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我2 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing2 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心2 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css