【Ajax】笔记-使用fetch函数发送AJAX请求

news2024/12/22 20:16:19

fetch()函数说明与使用方法详解

fetch()是XMLHttpRequest的升级版,用于在JavaScript脚本里面发出 HTTP请求,本文章向大家介绍fetch()的用法,主要包括fetch()的用法使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

Fetch() 是 window.fetch 的 JavaScript polyfill。

全局 fetch() 函数是 web 请求和处理响应的简单方式，不使用 XMLHttpRequest。这个 polyfill 编写的接近标准的 Fetch 规范。

fetch()是XMLHttpRequest的升级版，用于在JavaScript脚本里面发出 HTTP 请求。

fetch()的功能与 XMLHttpRequest 基本相同，但有三个主要的差异。

（1）fetch()使用 Promise，不使用回调函数，因此大大简化了写法，写起来更简洁。

（2）采用模块化设计，API 分散在多个对象上（Response 对象、Request 对象、Headers 对象），更合理一些；相比之下，XMLHttpRequest 的 API 设计并不是很好，输入、输出、状态都在同一个接口管理，容易写出非常混乱的代码

（3）fetch()通过数据流（Stream 对象）处理数据，可以分块读取，有利于提高网站性能表现，减少内存占用，对于请求大文件或者网速慢的场景相当有用。XMLHTTPRequest 对象不支持数据流，

所有的数据必须放在缓存里，不支持分块读取，必须等待全部拿到后，再一次性吐出来。在用法上接受一个 URL 字符串作为参数，默认向该网址发出 GET 请求，返回一个 Promise 对象

fetch()函数支持所有的 HTTP 方式:
获取HTML类型数据

fetch('/users.html')
  .then(function(response) {
    return response.text()
  }).then(function(body) {
    document.body.innerHTML = body
  })

获取JSON类型数据

fetch(url, options).then(function(response) { 
  // handle HTTP response 
}, function(error) { 
  // handle network error 
})

一：fetch()语法说明

fetch(url, options).then(function(response) { 
  // handle HTTP response 
}, function(error) { 
  // handle network error 
})

具体参数案例：

require('babel-polyfill') 
require('es6-promise').polyfill() 
import 'whatwg-fetch' 
fetch(url, { 
  method: "POST", 
  body: JSON.stringify(data), 
  headers: { 
    "Content-Type": "application/json" 
  }, 
  credentials: "same-origin" 
}).then(function(response) { 
  response.status     //=> number 100–599 
  response.statusText //=> String 
  response.headers    //=> Headers 
  response.url        //=> String 
  response.text().then(function(responseText) { ... }) 
}, function(error) { 
  error.message //=> String 
})

1.url定义要获取的资源。

这可能是：
• 一个 USVString 字符串，包含要获取资源的 URL。
• 一个 Request 对象。
options（可选）
一个配置项对象，包括所有对请求的设置。可选的参数有：
• method: 请求使用的方法，如 GET、POST。
• headers: 请求的头信息，形式为 Headers 对象或 ByteString。
• body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
• mode: 请求的模式，如 cors、 no-cors 或者 same-origin。
• credentials: 请求的 credentials，如 omit、same-origin 或者 include。
• cache: 请求的 cache 模式: default, no-store, reload, no-cache, force-cache, 或者 only-if-cached。

2.response一个 Promise，resolve 时回传 Response 对象

• 属性：
o status (number) - HTTP请求结果参数，在100–599 范围
o statusText (String) - 服务器返回的状态报告
o ok (boolean) - 如果返回200表示请求成功则为true
o headers (Headers) - 返回头部信息，下面详细介绍
o url (String) - 请求的地址
• 方法：
o text() - 以string的形式生成请求text
o json() - 生成JSON.parse(responseText)的结果
o blob() - 生成一个Blob
o arrayBuffer() - 生成一个ArrayBuffer
o formData() - 生成格式化的数据，可用于其他的请求
• 其他方法：
o clone()
o Response.error()
o Response.redirect()

3.response.headers

• has(name) (boolean) - 判断是否存在该信息头
• get(name) (String) - 获取信息头的数据
• getAll(name) (Array) - 获取所有头部数据
• set(name, value) - 设置信息头的参数
• append(name, value) - 添加header的内容
• delete(name) - 删除header的信息
• forEach(function(value, name){ … }, [thisContext]) - 循环读取header的信息

二：具体使用案例

1.GET请求

• HTML数据：

    fetch('/users.html') 
      .then(function(response) { 
        return response.text() 
      }).then(function(body) { 
        document.body.innerHTML = body 
  })

• IMAGE数据

    var myImage = document.querySelector('img'); 
     
    fetch('flowers.jpg') 
      .then(function(response) { 
        return response.blob(); 
      }) 
      .then(function(myBlob) { 
        var objectURL = URL.createObjectURL(myBlob); 
        myImage.src = objectURL; 
  });

• JSON数据

    fetch(url) 
      .then(function(response) { 
        return response.json(); 
      }).then(function(data) { 
        console.log(data); 
      }).catch(function(e) { 
        console.log("Oops, error"); 
  });

使用 ES6 的 箭头函数后：

fetch(url) 
  .then(response => response.json()) 
  .then(data => console.log(data)) 
  .catch(e => console.log("Oops, error", e))

response的数据

fetch('/users.json').then(function(response) { 
  console.log(response.headers.get('Content-Type')) 
  console.log(response.headers.get('Date')) 
  console.log(response.status) 
  console.log(response.statusText) 
})

POST请求

fetch('/users', { 
  method: 'POST', 
  headers: { 
    'Accept': 'application/json', 
    'Content-Type': 'application/json' 
  }, 
  body: JSON.stringify({ 
    name: 'Hubot', 
    login: 'hubot', 
  }) 
})

检查请求状态

function checkStatus(response) { 
  if (response.status >= 200 && response.status < 300) { 
    return response 
  } else { 
    var error = new Error(response.statusText) 
    error.response = response 
    throw error 
  } 
} 
function parseJSON(response) { 
  return response.json() 
} 
fetch('/users') 
  .then(checkStatus) 
  .then(parseJSON) 
  .then(function(data) { 
    console.log('request succeeded with JSON response', data) 
  }).catch(function(error) { 
    console.log('request failed', error) 
  })

采用promise形式
Promise 对象是一个返回值的代理，这个返回值在promise对象创建时未必已知。它允许你为异步操作的成功或失败指定处理方法。 这使得异步方法可以像同步方法那样返回值：异步方法会返回一个包含了原返回值的 promise 对象来替代原返回值。
Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve方法和reject方法。如果异步操作成功，则用resolve方法将Promise对象的状态变为“成功”（即从pending变为resolved）；如果异步操作失败，则用reject方法将状态变为“失败”（即从pending变为rejected）。
promise实例生成以后，可以用then方法分别指定resolve方法和reject方法的回调函数

//创建一个promise对象 
var promise = new Promise(function(resolve, reject) { 
  if (/* 异步操作成功 */){ 
    resolve(value); 
  } else { 
    reject(error); 
  } 
}); 
//then方法可以接受两个回调函数作为参数。 
//第一个回调函数是Promise对象的状态变为Resolved时调用，第二个回调函数是Promise对象的状态变为Reject时调用。 
//其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。 
promise.then(function(value) { 
  // success 
}, function(value) { 
  // failure 
});

那么结合promise后fetch的用法：

//Fetch.js 
export function Fetch(url, options) { 
  options.body = JSON.stringify(options.body) 
  const defer = new Promise((resolve, reject) => { 
    fetch(url, options) 
      .then(response => { 
        return response.json() 
      }) 
      .then(data => { 
        if (data.code === 0) { 
          resolve(data) //返回成功数据 
        } else { 
            if (data.code === 401) { 
            //失败后的一种状态 
            } else { 
            //失败的另一种状态 
            } 
          reject(data) //返回失败数据 
        } 
      }) 
      .catch(error => { 
        //捕获异常 
        console.log(error.msg) 
        reject()  
      }) 
  }) 
  return defer 
}

调用Fech方法：

import { Fetch } from './Fetch' 
Fetch(getAPI('search'), { 
  method: 'POST', 
  options 
}) 
.then(data => { 
  console.log(data) 
})

支持状况及解决方案

原生支持率并不高，幸运的是，引入下面这些 polyfill 后可以完美支持 IE8+ ：

• 由于 IE8 是 ES3，需要引入 ES5 的 polyfill: es5-shim, es5-sham
• 引入 Promise 的 polyfill: es6-promise
• 引入 fetch 探测库：fetch-detector
• 引入 fetch 的 polyfill: fetch-ie8
• 可选：如果你还使用了 jsonp，引入 fetch-jsonp
• 可选：开启 Babel 的 runtime 模式，现在就使用 async/await

DEMO

JS:

    <button>AJAX请求</button>
    <script>
        //文档地址
        //https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch
        
        const btn = document.querySelector('button');

        btn.onclick = function(){
            fetch('http://127.0.0.1:8000/fetch-server?vip=10', {
                //请求方法
                method: 'POST',
                //请求头
                headers: {
                    name:'atguigu'
                },
                //请求体
                body: 'username=admin&password=admin'
            }).then(response => {
                // return response.text();
                return response.json();
            }).then(response=>{
                console.log(response);
            });
        }
    </script>

在这里插入图片描述

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

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

相关文章

S-NER: A Concise and Efficient Span-Based Model for NamedEntity Recognition

S-NER: A Concise and Efficient Span-Based Model for NamedEntity Recognition

原文链接&#xff1a;Sensors | Free Full-Text | S-NER: A Concise and Efficient Span-Based Model for Named Entity Recognition Sensors 2022 介绍 NER中的序列标注模型使用条件随机场&#xff08;CRF&#xff09;来获取标签之间的依赖性&#xff0c;存在误差传播的问题&a…
阅读更多...
Docker可视化管理工具Portainer多机器安装使用

Docker可视化管理工具Portainer多机器安装使用

一、首先得安装docker Docker安装并指定主目录:https://blog.csdn.net/wdy_2099/article/details/77367107 二、使用docker方式安装portainer 安装命令如下&#xff1a; docker run -it -d \-p 8999:9000 \--name portainer \--restart always \-v /var/run/docker.sock:/v…
阅读更多...
@vue/cli安装

@vue/cli安装

vue/cli安装 1、全局安装vue/cli包2、查看是否成功 1、全局安装vue/cli包 yarn global add vue/cli2、查看是否成功 vue -V
阅读更多...
React Dva项目中模仿网络请求数据方法

React Dva项目中模仿网络请求数据方法

我们都已经选择react了 那么自然是一个前后端分离的开发形式 至少我在公司中 大部分时候是前后端同时开发的 一般你在开发界面没有接口直接给你 但你可以和后端约定数据格式 然后在前端模拟数据 我们在自己的Dva项目中 在根目录下的 mock 目录下创建一个js文件 我这里叫 filmDa…
阅读更多...
Qt 添加MySQL驱动教程 以及 操作数据库（增删查改）

Qt 添加MySQL驱动教程 以及 操作数据库（增删查改）

前言&#xff1a; 使用MySQL数据库前我们必须添加MySQL驱动&#xff0c;有了驱动我们才能连接数据库&#xff0c;连接数据库成功后才能操作数据库&#xff08;增删查改&#xff09;。 Qt 添加MySQL驱动教程 如下&#xff08;本人亲测成功版&#xff09;&#xff1a; https://do…
阅读更多...
【SQL语句】

【SQL语句】

目录 一、SQL语句类型 1.DDL 2.DML 3.DLL 4.DQL 二、数据库操作 1.查看 2.创建 2.1 默认字符集 2.2 指定字符集 3.进入 4.删除 5.更改 5.1 库名称 5.2 字符集 三、数据表操作 1.数据类型 1.1 数值类型&#xff08;常见&#xff0c;下同&#xff09; 1.1.1 T…
阅读更多...
【IDEA】IDEA 中点击Download Source（下载源码）后，下载的源码存储到哪了？

【IDEA】IDEA 中点击Download Source（下载源码）后，下载的源码存储到哪了？

【问】如上图&#xff0c;IDEA 中点击 Download Source&#xff08;下载源码&#xff09;后&#xff0c;下载的源码存储到哪了&#xff1f; 【答】 先找到此源码所属 Jar 包在哪&#xff1b;点击 Download Source&#xff08;下载源码&#xff09;后&#xff0c;会发现存储 J…
阅读更多...
文件读写流函数

文件读写流函数

文件 文件读写 链接 std::ifstream---std::ofstream 头文件--#include <fstream> 执行都是类&#xff0c;用这些类操作文件都要建立对象流。 1&#xff0c;建立对象流 流对象的建立有两种方式&#xff1a; &#xff08;1&#xff09;使用fstream类可以不指定文件和…
阅读更多...
C# winform子窗口向父窗口传值

C# winform子窗口向父窗口传值

这里我使用一个简单的方法。只需要在父窗口定义一个静态变量就行。 父窗体为Form1,子窗体为Form2。 public static int get_num0; 子窗体直接给get_num赋值即可。 Form1.get_num2; 这样父窗体就能获得get_num修改后这个值了
阅读更多...
若依vue 多table前端HTML页面导出一张Excel表

若依vue 多table前端HTML页面导出一张Excel表

前言 导入依赖&#xff0c;具体前端vue配置就不介绍了&#xff0c;直接晒具体细节代码 实现 需要在多table外加div&#xff0c;其他都是基本操作js代码 import FileSaver from file-saver import * as XLSX from "xlsx";const htmlToExcel {getExcelNew(classNam…
阅读更多...
实验二十四、滞回比较器电压传输特性的测量

实验二十四、滞回比较器电压传输特性的测量

一、题目 滞回比较器电压传输特性的测量。 二、仿真电路 电路如图1所示。 为便于观察电压传输特性的变化&#xff0c;输入信号采用信号发生器产生的幅值为 10 V 10\,\textrm V 10V、频率为 20 Hz 20\,\textrm{Hz} 20Hz 的三角波电压。采用虚拟的运算放大电路&#xff0c;其…
阅读更多...
自学网络安全（黑客）两个月都没入门？

自学网络安全（黑客）两个月都没入门？

最近我经常会看到这一类的问题&#xff1a; 学习XXX知识没效果&#xff1b;学习XXX技能没方向&#xff1b;学习XXX没办法入门&#xff1b; 给你一个忠告&#xff0c;如果你完全没有基础的话&#xff0c;前期最好不要盲目去找资料学习&#xff0c;因为大部分人把资料收集好之后…
阅读更多...
DP学习第三篇之不同路径

DP学习第三篇之不同路径

DP学习第三篇之不同路径 62. 不同路径 - 力扣&#xff08;LeetCode&#xff09; 一.题目解析 二. 算法原理 状态表示 tips: 经验题目要求。以[i,j]位置为结尾&#xff0c;。。。 dp[i][j]: 走到[i, j]位置时&#xff0c;一共多少种路径 状态转移方程 tips: 用之前或之后的状…
阅读更多...
Visual Studio 2022 cmake配置opencv开发环境

Visual Studio 2022 cmake配置opencv开发环境

1. 环境与说明 这里我用的是 widnows 10 64位&#xff0c;Visual Studio 用的 Visual Studio Community 2022 (社区版) 对于Android开发工程师来说&#xff0c;为什么要使用Visual Studio 呢 ? 因为在Visual Studio中开发调试OpenCV方便&#xff0c;可以开发调试好后&#xf…
阅读更多...
DDQN求解FJSP问题

DDQN求解FJSP问题

柔性调度问题代码&#xff0c;DDQN求解FJSP问题 迭代曲线图 奖励函数迭代曲线 makespan迭代曲线 代码&#xff01;&#xff01; 全部见我的git仓库: DFJSP_Share DDQN算法主体 import csv import os from environment2.Environment import Environment import torch from …
阅读更多...
生物信息学_玉泉路_课堂笔记_05 第五章 从头基因组组装与注释

生物信息学_玉泉路_课堂笔记_05 第五章 从头基因组组装与注释

&#x1f345; 课程&#xff1a;生物信息学_玉泉路_课堂笔记 中科院_2022秋季课 第一学期 &#x1f345; 个人笔记使用 &#x1f345; 2023/7/20 上周回顾 从头基因组组装与注释 第一节 基因组调查 最左边的 error-peak 是测序错误导致的 杂合导致的峰 重复序列 在纯和峰值的右…
阅读更多...
简单明了证明多态虚表是位于常量区

简单明了证明多态虚表是位于常量区

证实虚表存储与常量区 class Person { public:virtual void BuyTicket() { cout << "买票-全价" << endl; }virtual void Func1() {cout << "Person::Func1()" << endl;}virtual void Func2() {cout << "Person::Func…
阅读更多...
2 mybatis常见错误汇总

2 mybatis常见错误汇总

2.1 org.apache.ibatis.exceptions.PersistenceException: ### Error building SqlSession. ### Cause: org.apache.ibatis.builder.BuilderException: Error creating document instance. Cause: org.xml.sax.SAXParseException; lineNumber: 2; columnNumber: 6; 不允许有匹…
阅读更多...
ubuntu 20.04 rtc时间显示问题探究

ubuntu 20.04 rtc时间显示问题探究

1、硬件与软件 本次测试的硬件为RK3568芯片&#xff0c;操作系统为ubuntu 20.04。 2、RTC与系统时间 先说结果&#xff0c;如果RTC驱动不可用或者RTC内部存储的时间非法&#xff0c; 那么操作系统会存储上一次有效的时间&#xff0c;当再次上电时&#xff0c;date命令会使用存储…
阅读更多...
gitee上创建新仓库如何clone到本地，并初始化项目

gitee上创建新仓库如何clone到本地，并初始化项目

目录 一、克隆 方法一 方法二 二、初始化项目 构建基本框架 自动生成代码 一、克隆 方法一 由于github速度较慢&#xff0c;这里我们使用gitee。我们在gitee上面创建一个仓库&#xff0c;然后我们可以通过ideal直接克隆下来&#xff0c;仓库设置如下 接着使用ideal将项…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023