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

fetch 是啥?

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

基本用法

js 复制代码
/*
下面是 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 示例

js 复制代码
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 示例

js 复制代码
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));

上传文件

js 复制代码
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));

封装实例

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

js 复制代码
/**
 * 处理 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)
}

使用示例

js 复制代码
ajax("/api", {name:"集成显卡"}).then(d=>console.debug(d))
相关推荐
小小小小宇5 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊5 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习6 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖6 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水6 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐7 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121387 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴7 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript