【ajax】10.fetch：使用fetch函数发送AJAX请求

最新推荐文章于 2022-04-16 18:28:38 发布
最新推荐文章于 2022-04-16 18:28:38 发布
阅读量223 收藏 1
点赞数
分类专栏： ajax 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43210113/article/details/110823891
版权

〇、前情提要

在看b站视频 - 尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版），中插了这个知识记录一下。

参考：

  1. 我的笔记：
    【javaweb】b站-尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版） 笔记
    https://blog.csdn.net/weixin_43210113/article/details/110628389
  2. b站视频 - 尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版）
    https://www.bilibili.com/video/BV1WC4y1b78y?p=2
  3. 笔记视频链接
    链接：https://pan.baidu.com/s/1Wnwb42-AaqAlg6cQ0PRHwg
    提取码：3waj
  4. BootCDN
    https://www.bootcdn.cn
  5. MDN - WorkerOrGlobalScope.fetch()
    https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch

————————————————————————————

  1. 我的笔记：
    【ajax】9.Axios：Axios发送AJAX请求+Axios函数发送AJAX请求
    https://blog.csdn.net/weixin_43210113/article/details/110823850

一、使用fetch函数发送AJAX请求

如没有安装过NodeJS和expressjs请看↓

我的笔记：
【ajax】NodeJS的安装与介绍+express框架介绍与基本使用
https://blog.csdn.net/weixin_43210113/article/details/110636188

如没有安装过nodemon请看

我的笔记：
【ajax】5.JSON：服务端响应JSON数据+nodemon自动重启工具安装+Missing write access to /usr/local/lib/node_modules解决方法
https://blog.csdn.net/weixin_43210113/article/details/110792442

WorkerOrGlobalScope.fetch()

参考：
MDN - WorkerOrGlobalScope.fetch()
https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch
在这里插入图片描述
Promise<Response> fetch(input[, init]);

fetch.html
		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 => {
                console.log(response);
            });
        }

console.log(response);返回一堆，其中有一个text()在这里插入图片描述

		btn.onclick = function(){
            fetch('http://127.0.0.1:8000/fetch-server?vip=10', {
            }).then(response => {
                return response.text();
            }).then(response=>{
                console.log(response);
            });
        }

返回字符串
在这里插入图片描述

		btn.onclick = function(){
            fetch('http://127.0.0.1:8000/fetch-server?vip=10', {
            }).then(response => {
                return response.json();
            }).then(response=>{
                console.log(response);
            });
        }

返回json
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fetch 发送 AJAX请求</title>
</head>
<body>
    <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>
</body>
</html>
server.js
//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
//fetch 服务
app.all('/fetch-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX');
    const data = {name:'尚硅谷'};
    response.send(JSON.stringify(data));
});

//4. 监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动, 8000 端口监听中....");
});
绝不做九漏鱼
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【ajax】9.Axios：Axios发送AJAX请求+Axios函数发送AJAX请求
weixin_43210113的博客
12-09 179
〇、前情提要 在看b站视频 - 尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版），中插了这个知识记录一下。 参考： 我的笔记： 【javaweb】b站-尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版） 笔记 https://blog.csdn.net/weixin_43210113/article/details/110628389 b站视频 - 尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020
fetch请求获取blob和arraybuffer文件流及核心API使用总结
小青蛙的博客
12-22 2万+
123
获取跨域数据
yingzi10101118的博客
11-02 663
1.fetch window.onload=function(){ let oBtn=document.getElementById('btn'); oBtn.onclick=async function(){ //请求数据 let res=await fetch('data/1.txt'); //解析数据 let str=await res.text(); console.log...
Progressive Web Apps(PWA)核心技术-Fetch API
待花开花谢的博客
03-19 363
简单来说Fetch API就是一个请求资源的接口，比XMLHttpRequest更简单。 Fetch支持跨源资源共享（CORS），正式环境需要HTTPS。 请求示例： fetch('examples/example.json') .then(function(response) { if (!response.ok) { throw Error(response.status...
ES6 fetch请求
肖皓文
05-24 529
先贴代码 看下 ajax 和fetch 之间的区别 { // 原生ajax function ajax(){ xmlHttp = new XMLHttpRequest(); xmlHttp.open('get','https://api.github.com/users',true) xmlHt...
使用fetch函数发送AJAX请求
IAN27的博客
05-08 244
使用fetch函数发送AJAX请求 案例 点击按钮发送AJAX请求 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>fetch 发送 AJAX请求</title> &l
fetch.io：whatwg提取api的小包装！
01-28
beforeRequest- Function ，一个请求前的钩子函数，返回false将取消请求 afterResponse- Function ，后响应挂钩函数 afterJSON- Function ，为.json()添加处理程序，以检查响应数据 prefix- String ，url前缀 其他...
xe-ajax3.4.13.js 封装 fetch 异步请求 javascript 库
11-26
基于 Promise API 的异步请求函数，支持 node.js、browser 环境
DAWM06UF4-2-XHR-Fetch-material：使用Node.js Workshop的AJAX，Fetch，Promises和Async函数。 DAWM06UF4.2
01-30
DAWM06UF4-2-AJAX-材料 AJAX与Node.js Workshop。 1.XHR 2.XHR2 3，NODEJS 4，XML 5，JSON 6，承诺7，异步功能8，获取API
xe-ajax::airplane: fetch 异步请求库，用于浏览器和 node.js 的 HTTP 客户端
05-05
xe-ajax 依赖 ，如果您的环境不支持 Promise，使用 babel-polyfill 或者 bluebird.js 8+ :check_mark: Latest :check_mark: Latest :check_mark: Latest :check_mark: Latest :check_mark: 6.1+ :check_mark: ...
react-fetch：用于获取数据的React组件
02-04
ReactFetch用于获取数据的React组件npm i @kne/react-fetch使用示例import Fetch ,{ useFetch , useFetchAll , withFetch , withFetchAll , createWithFetch , createWithFetchAll , preset} from ' @kne/react-...
fetch的各种api
weixin_50736511的博客
04-16 1535
1.结构： fetch(url，{参数)}) .then(...) .catch(...) 2.与async await一起使用 async function fetchMovies() { const response = await fetch('/movies'); // 等待直到请求完成 console.log(response); } 3.请求 JSON 数据 fetch()请求成功以后，得到的是一个 Response 对象。而不是json对象，需要转换一下。 as
JavaScript承诺入门
cune1359的博客
07-05 140
异步代码对于执行耗时的任务很有用，但是当然，它并非没有缺点 。 异步代码使用回调函数来处理其结果，但是回调函数无法返回典型JavaScript函数可以返回的值 。 另请参阅： 了解同步和异步JavaScript¢????? 第1部分 因此，它们不仅剥夺了我们控制功能执行的能力，而且使错误处理变得有些麻烦。 这是Promise对象出现的地方，因为它旨在填补异步编码中的一些缺陷 。 ...
Fetch 简单使用
rufeike的博客
12-26 204
文章目录Fetch 简单使用学习参考：[简书使用 Fetch](https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch)fetch请求示例请求JSON文件请求txt文件请求图片或视频文件 Fetch 简单使用 Fetch可以替代XMLHttpRequest实现异步请求 学习参考：简书使用 Fetch fetc...
Fetch的四种请求
看表该写博客了
03-21 3833
Fetch的四种请求 记录在写前端页面时所用fetch发送四种请求的写法 注意.then({ })时response.json()与response.text()的区别： json( ):服务端返回json数据 text( ):服务端返回字符串格式 1.GET: fetch('http://localhost:5555/dictItem/getAll') .then(f...
Axios和Axios函数发送Ajax请求
x1037490413的博客
07-06 193
可以安装axios包，也可以引入 注意：get请求不能设置请求体，post请求可以设置请求体 post格式是 第一个参数是url，第二个参数是请求体，第三个参数是其他配置 注意： axios发起post请求，url后面的参数自动拼接到Request URL上 axios默认用get传值时用params传参，用post传值时，用data传参，就是用post传值时，url参数影响了请求地址自动加上了params 如果要解决这个问题，需要在请求开始时做一个拦截就好了 apiRequest.interceptors
fetch()方法介绍
热门推荐
大灰狼的小绵羊哥哥的博客
04-11 3万+
告别XMLHttpRequest 与XMLHttpRequest(XHR)类似，fetch()方法允许你发出AJAX请求。区别在于Fetch API使用Promise，因此是一种简洁明了的API，比XMLHttpRequest更加简单易用。 从Chrome 40开始，Fetch API可以被利用在Service Worker全局作用范围中，自Chrome 42开始，可以被利用在页面中。 如果
采坑记--fetch 请求header与body配置及常用问题
star094606的博客
11-07 1万+
fetch 请求-header与body配置及常用问题 引入 说道fetch就不得不提XMLHttpRequest了，XHR在发送web请求时需要开发者配置相关请求信息和成功后的回调，尽管开发者只关心请求成功后的业务处理，但是也要配置其他繁琐内容，导致配置和调用比较混乱，也不符合关注分离的原则；fetch的出现正是为了解决XHR存在的这些问题。例如下面代码： fetch(url).then...
使用AJAX请求：前端可以使用AJAX技术发起异步请求，从后端获取数据。AJAX请求可以通过XMLHttpRequest对象或者fetch函数来实现
最新发布
05-24
其中，XMLHttpRequest对象是AJAX的传统方式，在使用时需要调用open()方法设置请求方法（GET/POST）、请求地址、是否异步等参数，然后发送请求并监听onreadystatechange事件，最后通过responseText或responseXML属性...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值