fetch的基本使用

最新推荐文章于 2024-03-01 16:05:49 发布
最新推荐文章于 2024-03-01 16:05:49 发布
阅读量534 收藏 1
点赞数
分类专栏： js ajax 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46500485/article/details/109193640
版权
js 同时被 2 个专栏收录
76 篇文章 2 订阅
订阅专栏
ajax
10 篇文章 0 订阅
订阅专栏

服务器代码

const express = require('express')
const app = express()
const bodyParser = require('body-parser')
    // 处理静态资源
app.use(express.static('public'))
    // 处理参数
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

// 设置允许跨域访问该服务
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    res.header('Access-Control-Allow-Headers', 'mytoken');
    next();
});
app.get('/async1', (req, res) => {
    res.send('hello1')
})
app.get('/async2', (req, res) => {
    if (req.query.info == 'hello') {
        res.send('world')
    } else {
        res.send('error')
    }
})

app.get('/adata', (req, res) => {
    res.send('Hello axios!')
})
app.get('/axios', (req, res) => {
    res.send('axios get 传递参数' + req.query.id)
})
app.get('/axios/:id', (req, res) => {
    res.send('axios get (Restful) 传递参数' + req.params.id)
})
app.delete('/axios', (req, res) => {
    res.send('axios delete 传递参数' + req.query.id)
})
app.post('/axios', (req, res) => {
    res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd)
})
app.put('/axios/:id', (req, res) => {
    res.send('axios put 传递参数' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})

app.get('/axios-json', (req, res) => {
    res.json({
        uname: 'lisi',
        age: 12
    });
})


app.get('/fdata', (req, res) => {
    res.send('Hello Fetch!')
})
app.get('/books', (req, res) => {
    res.send('传统的URL传递参数!' + req.query.id)
})
app.get('/books/:id', (req, res) => {
    res.send('Restful形式的URL传递参数!' + req.params.id)
})
app.delete('/books/:id', (req, res) => {
    res.send('DELETE请求传递参数!' + req.params.id)
})
app.post('/books', (req, res) => {
    res.send('POST请求传递参数!' + req.body.uname + '---' + req.body.pwd)
})
app.put('/books/:id', (req, res) => {
    res.send('PUT请求传递参数!' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})

app.get('/json', (req, res) => {
    res.json({
        uname: 'lisi',
        age: 13,
        gender: 'male'
    });
})

app.get('/a1', (req, res) => {
    setTimeout(function() {
        res.send('Hello TOM!')
    }, 1000);
})
app.get('/a2', (req, res) => {
    setTimeout(function() {
        res.send('Hello JERRY!')
    }, 2000);
})
app.get('/a3', (req, res) => {
    setTimeout(function() {
        res.send('Hello SPIKE!')
    }, 3000);
})

// 路由
app.get('/data', (req, res) => {
    res.send('Hello World!')
})
app.get('/data1', (req, res) => {
    setTimeout(function() {
        res.send('Hello TOM!')
    }, 1000);
})
app.get('/data2', (req, res) => {
    res.send('Hello JERRY!')
})

// 启动监听
app.listen(3000, () => {
    console.log('running...')
})

1.fetch的基本用法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        fetch('http://localhost:3000/fdata').then(function(data) {
            //text()方法属于fetchAPI的一部分  它返回一个promise对象 用于获取后台的数据
            return data.text();
        }).then(function(data) {
            console.log(data);
        })
    </script>
</body>

</html>

2.fetch的请求参数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //
        /* fetch('http://localhost:3000/books?id=123', {
                            method: 'get'
                        }).then(function(data) {
                            //text()方法属于fetchAPI的一部分  它返回一个promise对象 用于获取后台的数据
                            return data.text();
                        }).then(function(data) {
                            console.log(data);
                        }) */
        /* fetch('http://localhost:3000/books/123', {
            method: 'get'
        }).then(function(data) {
            //text()方法属于fetchAPI的一部分  它返回一个promise对象 用于获取后台的数据
            return data.text();
        }).then(function(data) {
            console.log(data);
        }) */

        fetch('http://localhost:3000/books/789', {
            method: 'delete'
        }).then(function(data) {
            //text()方法属于fetchAPI的一部分  它返回一个promise对象 用于获取后台的数据
            return data.text();
        }).then(function(data) {
            console.log(data);
        })
    </script>
</body>

</html>

3.fetch的post请求传参

/* fetch('http://localhost:3000/books ', {
            method: 'post',
            body: 'uname=list&pwd=123',
            headers: {
                'Content-type': 'application/x-www-form-urlencoded'
            }
        }).then(function(data) {
            return data.text();
        }).then(function(data) {
            console.log(data);
        }) */
        /* fetch('http://localhost:3000/books ', {
            method: 'post',
            body: JSON.stringify({
                uname: '战三',
                pwd: 456
            }),
            headers: {
                'Content-type': 'application/json'
            }
        }).then(function(data) {
            return data.text();
        }).then(function(data) {
            console.log(data);
        })
 */
fetch('http://localhost:3000/books/123 ', {
            method: 'put',
            body: JSON.stringify({
                uname: '战三',
                pwd: 456
            }),
            headers: {
                'Content-type': 'application/json'
            }
        }).then(function(data) {
            return data.text();
        }).then(function(data) {
            console.log(data);
        })

4.fetch响应结果的数据形式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //
        /* 
         Fetch相应结果的数据格式
          */
        /* fetch("http://localhost:3000/json").then(function(data) {
            return data.json();
        }).then(function(data) {
            console.log(data);
        }) */
        fetch("http://localhost:3000/json").then(function(data) {
            return data.json();
        }).then(function(data) {
            console.log(data);
        })
    </script>
</body>

</html>
江呱呱
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
fetch使用
sJohnny的博客
10-11 1373
为何使用fetch？         前端开发中，向服务器请求数据通常用三种：XMLHttpRequest、fetch、jQuery的ajax         XMLHttpRequest、fetch是浏览器的原生API，fetch在IE和低版本的浏览器支持不友好         jQuery的ajax其实就是对XMLHttpRequest的封装实现   建议在项目中引用第三方封装好...
【Fetch】fetch的使用
jzq950522的博客
03-05 714
1.使用fetch进行请求 fetch请求是基于promise的HTTP库，整个配置和请求很简单，来看MDN上提供的代码: fetch('http://example.com/movies.json') .then(function(response) { console.log(response); return response.json(); }) .then(fu...
fetch请求方法传参格式和headers有关
晨曦开发的秘密基地
12-07 3547
fetch post请求方法传参格式和headers有关
Fetch / ajax 不能获取response中的所有headers的解决方法(适用nginx)
lanadeus
08-24 8974
起因笔者在用fetch进行react开发的时候用到了chrome跨域插件Allow-Control-Allow-Origin: *, 因为后端和前端的开发是同时进行的, 并且不在同一台机子上. 为了能够在前端方便地调试后端api, 我使用了这个插件. 姑且是能够进行cors请求了.但是我发现, 无论如何都不能在fetch的response的headers里面, 获得我想要的header. 但是打开c
fetch基本使用
m0_68154820的博客
03-01 2125
fetch
Fetch使用方法
热门推荐
hsany330的专栏
06-11 2万+
前言： 　　fetch是用来取代传统的XMLHttpRequest的。它的优点很多，包括链式调用的语法、返回promise等。 什么是fetch? 　　fetch api是基于promise的设计，它是为了取代传统xhr的不合理的写法而生的。 WHY fetch？ 　　xhr请求写起来非常的混乱，如下所示： var xhr = new XMLHttpRequest(...
vue项目中使用fetch的实现方法
10-17
1. **基本使用**： fetch方法接受两个参数：`input`（资源的URL或Request对象）和`init`（配置对象）。例如： ```javascript fetch('http://example.com/data.json') .then(response => response.json()) .then...
fetch 使用及如何接收JS传值
10-19
在了解上述关键点后，我们来看fetch的基本使用方式： ```javascript fetch('***', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON....
NHibernate 实例 链表查询 基本使用
12-19
在这个实例中，我们将深入探讨如何利用NHibernate进行链表查询的基本使用，以及如何配置和实现多表查询。 首先，让我们理解NHibernate的核心概念。它通过创建对象模型并映射到数据库表来简化数据库操作。对象模型是...
Fetch超时设置与终止请求详解
11-30
Fetch API 的基本使用非常简洁，例如发送一个GET请求： ```javascript fetch('https://www.baidu.com') .then(resp => resp.text()) .then(resp => console.log(resp)) .catch(error => console.error(error)); ...
人工智能 - paddlepaddle飞桨 - 深度学习基础教程 - 编程指南
YunWisdom
01-01 1511
编程指南 目前飞桨（PaddlePaddle，以下简称Paddle）已经同时支持动态图和静态图两种编程方式， 本文主要侧重于介绍静态图的编程方法，关于动态图编程方法，请参考动态图机制-DyGraph。 阅读完本文档，您将了解在Paddle静态图编程方式中，如何表示和定义数据变量，以及如何完整的组建一个深度学习网络并进行训练。 数据的表示和定义¶ Paddle和其他主流框架一样，使用Te...
取出list中属性_面向未来编程，如何在 Vue2 中使用 Vue3 的语法[实践篇]
weixin_36155754的博客
01-07 525
现已更名为 Vue Composition API面向未来编程(Future-Oriented Programming)，vue-function-api 提供开发者在 Vue2.x 中使用 Vue3 的语法逻辑开发应用。(为方便以下以 Vue2 表示)本文不对文档 api 对过多说明，仅讨论在项目实践中遇到的问题。比较两者的区别是对 Vue3 写法最快的了解，下面通过对比同一个功能在 Vue2 ...
fetch的基本用法、请求参数及响应结果
背心的博客
10-22 7440
fetch的基本用法、请求参数及响应结果
fetch 请求列表ListView
weixin_33719619的博客
12-12 97
//练习二 电影列表(网络请求数据)可参考:http://www.jianshu.com/p/22de6734d858/** 展示电影列表* 逻辑:* 未获得数据时:显示等待页面* 获得数据时: 显示电影列表页面** 需要给state添加一个属性,用于记录下载状态** http://raw.githubusercontent.com/facebook/react-native/master/d...
Fetch入门
前端学习博客
10-17 7796
Body.blob()读取 Response 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 Blob 格式（二进制格式，包含二进制数据信息）的 Promise 对象。Body.text()读取 Response 对象并且将它设置为已读（因为 Responses 对象被设置为了 stream 的方式，所以它们只能被读取一次），并返回一个被解析为 USVString 格式（文本格式）的 Promise 对象。
接口调用Fetch方法以及fetch请求参数
Hiroshi's
12-18 1万+
fetch概述 看一个基本的例子： 服务端代码： app.get('/fdata',(req,res)=>{ setTimeout(function(){ res.send('this is content retrived by fetch method') },3000) }) 测试： <script> fetch('http://127.0.0.1:9999/fdata').then((data) => {
helm fetch的使用
最新发布
04-03
使用helm fetch的基本语法如下： ``` helm fetch [CHART] [flags] ``` 其中，[CHART]表示要下载的Helm chart的名称，可以是chart名称、chart名称和版本号的组合，或者是一个包含chart名称和版本号的URL。 以下是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值