axios平替!用浏览器自带的fetch处理AJAX(兼容表单/JSON/文件上传)

news2024/11/24 8:38:10

fetch 是啥?

fetch 函数是 JavaScript 中用于发送网络请求的内置 API,可以替代传统的 XMLHttpRequest。它可以发送 HTTP 请求(如 GET、POST 等),并返回一个 Promise,从而简化异步操作
在这里插入图片描述

基本用法

/*
下面是 fetch 的基本语法
url:请求的 URL(必需)
options:一个包含请求配置的对象(可选),如请求方法、请求头、请求体等。
*/
fetch(url, options)
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

常见选项

参数 options 是一个对象,可以包含以下常见属性:

  • method:请求方法,例如 GET、POST、PUT、DELETE 等。默认是 GET。
  • headers:包含请求头的对象,通常用于设置 Content-Type 或授权信息。
  • body:请求体,用于传递数据(POST、PUT 请求时)。
  • mode:请求模式,如 cors、no-cors 和 same-origin。
  • credentials:指示是否发送 cookies,值为 omit(默认不发送)、same-origin(同源发送)或 include(跨域发送)。

GET 示例

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json(); // 将响应解析为 JSON
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

POST 示例

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John', age: 30 })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

上传文件

const formData = new FormData();
formData.append('file', fileInput.files[0]); // 假设 fileInput 是一个文件输入

fetch('https://api.example.com/upload', {
  method: 'POST',
  body: formData
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

封装实例

我们可以将常用的数据交互封装为一个函数,方便调用

/**
 * 处理 Fetch,如果返回值不符合规范,则报错(可通过 .catch 获取)
 * @param {*} response
 * @returns
 */
const handleResponse = response=> response.json().then(json=>{
    if(response.ok && json.success===true)
        return json
    else
        return Promise.reject(json)
})

/**
 * 通用 FETCH 交互函数(POST)
 * @param {String} url - 后端地址
 * @param {Object} data - 表单数据
 * @param {Boolean} useJSON - 是否使用 JSON 格式提交
 * @param {Object} headers - 额外的请求头
 * @param {Function} handler - 处理函数,默认转换为 JSON 对象
 */
window.ajax = (url, data, useJSON=true, headers={}, handler=handleResponse)=>{
    let body = undefined
    if(useJSON){
        headers['Content-Type'] = 'application/json'
        body = JSON.stringify(data)
    }else{
        if(data){
            body = new FormData()
            Object.keys(data).forEach(k=> body.append(k, data[k]))
        }
    }

    return fetch(url, {method:"POST", headers, body}).then(handler)
}

使用示例

ajax("/api", {name:"集成显卡"}).then(d=>console.debug(d))

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2238231.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux(CentOS)安装 Nginx

CentOS版本:CentOS 7 Nginx版本:1.24.0 有两种安装方式 一、通过 yum 安装 需要 root 权限,普通用户使用 sudo 进行命令操作 参考:https://nginx.org/en/linux_packages.html#RHEL 1、安装依赖 sudo yum install yum-utils 2…

[原创]手把手教学之前端0基础到就业——day11( Javascript )

文章目录 day11(Javascript)01Javascript①Javascript是什么②JavaScript组成③ Javascript的书写位置1. 行内式 (不推荐)2 . 内部位置使用 ( 内嵌式 )3. 外部位置使用 ( 外链式 ) 02变量1. 什么是变量2. 定义变量及赋值3. 注意事项4. 命名规范 03输入和输出1) 输出形式12) 输出…

【C++笔记】C++三大特性之继承

【C笔记】C三大特性之继承 🔥个人主页:大白的编程日记 🔥专栏:C笔记 文章目录 【C笔记】C三大特性之继承前言一.继承的概念及定义1.1 继承的概念1.2继承的定义1.3继承基类成员访问方式的变化1.4继承类模板 二.基类和派生类间的转…

Colorful/七彩虹iGame G-ONE Plus 12代处理器 Win11原厂OEM系统 带COLORFUL一键还原

安装完毕自带原厂驱动和预装软件以及一键恢复功能,自动重建COLORFUL RECOVERY功能,恢复到新机开箱状态。 【格式】:iso 【系统类型】:Windows11 原厂系统下载网址:http://www.bioxt.cn 注意:安装系统会…

【LeetCode】分发糖果 解题报告

135. 分发糖果 - 题目链接 n个孩子站成一排。给你一个整数数组ratings表示每个孩子的评分。 你需要按照以下要求,给这些孩子分发糖果: 每个孩子至少分配到1个糖果。相邻两个孩子评分更高的孩子会获得更多的糖果。 请你给每个孩子分发糖果,…

ArcGIS从Excel表格文件导入XY数据并定义坐标系与投影的方法

本文介绍在ArcMap软件中,从Excel表格文件中批量导入坐标点数据,将其保存为.shp矢量格式,并定义坐标系、转为投影坐标系的方法。 已知我们有一个Excel表格文件(可以是.xls、.xlsx、.csv等多种不同的表格文件格式)&#…

爬虫 - 二手交易电商平台数据采集 (一)

背景: 近期有一个需求需要采集某电商网站平台的商品数据进行分析。因此,我计划先用Python实现一个简单的版本,以快速测试技术的实现可能性,再用PHP实现一个更完整的版本。文章中涉及的技术仅为学习和测试用途,请勿用于商业或非法用…

「C/C++」C++标准库 之 #include<iostream> 标准输入输出

✨博客主页何曾参静谧的博客📌文章专栏「C/C」C/C程序设计📚全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasoli…

AI出图,在家装行业杀疯了!

家装行业作为一个庞大的产业,长期以来面临着诸多难题,而随着AIGC技术的蓬勃发展,AI促进家装设计行业迎来了新的春天。 在传统家装设计流程中,相信大家对“设计环节充满了繁琐与复杂”有着非常深刻的体验,设计师需要花…

MySQL核心业务大表归档过程

记录一下2年前的MySQL大表的归档,当时刚到公司,发现MySQL的业务核心库,超过亿条的有7张表,最大的表有9亿多条,有37张表超过5百万条,部分表行数如下: 在测试的MySQL环境 : pt-archiv…

深度学习——权重初始化、评估指标、梯度消失和梯度爆炸

文章目录 🌺深度学习面试八股汇总🌺权重初始化零初始化 (Zero Initialization)随机初始化 (Random Initialization)Xavier 初始化(Glorot 初始化)He 初始化正交初始化(Orthogonal Initialization)预训练模型…

Proteus中数码管动态扫描显示不全(已解决)

文章目录 前言解决方法后记 前言 我是直接把以前写的 51 数码管程序复制过来的,当时看的郭天祥的视频,先送段选,消隐后送位选,最后来个 1ms 的延时。 代码在 Proteus 中数码管静态是可以的,动态显示出了问题——显示…

简单说一下Pinia 和 Vuex的区别

Pinia 和 Vuex 是 Vue.js 生态系统中两种状态管理库,它们都用于管理复杂应用的状态。尽管它们的目标相似,但在设计和使用上有许多不同之处。以下是 Pinia 和 Vuex 的主要区别: 1. 设计理念 Vuex 集中式存储:Vuex 采用单一的集中…

个人博客静态样式部署

首页部分 views/layout/layoutwave.vue <script setup> import router from /router; import { ref, onMounted, onUnmounted } from vue import /assets/img/icons/font_p81061dps7l/iconfont.cssconst canvas ref(null) const canvasFa ref(null) const fish ref(n…

综合文化信息管理系统|基于java和小程序的综合文化信息管理系统设计与实现(源码+数据库+文档)

综合文化信息管理系统 目录 基于java和小程序的打印室预约系统设计与实现 一、前言 二、系统设计 三、系统功能设计 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大厂码农|毕设布道师&…

渗透测试(socket,namp,scapy)

socket:可以用来实现不同虚拟机或者不同计算机之间的通信。 socket常用函数&#xff1a; sock.bind(host,port) //host可接受client范围&#xff0c;以及连接的端口 sock.listen()//sever开启监听连接 sock.accpet()//返回 sock&#xff0c;addr 用来接受和发送数据 addr…

leetcode刷题记录(二十六)——151. 反转字符串中的单词

&#xff08;一&#xff09;问题描述 . - 力扣&#xff08;LeetCode&#xff09;. - 备战技术面试&#xff1f;力扣提供海量技术面试资源&#xff0c;帮助你高效提升编程技能,轻松拿下世界 IT 名企 Dream Offer。https://leetcode.cn/problems/reverse-words-in-a-string/desc…

python中常见的8种数据结构之一数组的应用

在Python中&#xff0c;数组是一种常见的数据结构&#xff0c;用于存储一系列相同类型的元素。在实际应用中&#xff0c;数组可以用于解决各种问题。 以下是数组在Python中的一些常见应用&#xff1a; 1. 存储和访问数据&#xff1a;数组可以用于存储和访问一组数据。可以通过…

JS禁用鼠标滚动条功能且滚动条不消失教程

这个JS功能我找了好久好久才找到的&#xff0c;希望能够帮助到大家&#xff0c;网上有很多教程虽然能够实现禁用滚动条的效果&#xff0c;但是滚动条却直接消失不见了&#xff0c;那么今天我就把禁用滚动条但滚动条不消失的JS代码分享给大家。 实例代码如下&#xff1a; JS禁用…

学习虚幻C++开发日志——定时器

官方文档&#xff1a;虚幻引擎中的Gameplay定时器 | 虚幻引擎 5.5 文档 | Epic Developer Community | Epic Developer Community 定时器 安排在经过一定延迟或一段时间结束后要执行的操作。例如&#xff0c;您可能希望玩家在获取某个能力提升道具后变得无懈可击&#xff0c;…