http协议put和patch的区别——put推荐更新全部内容，patch推荐更新部分内容 & fetch发送请求基本用法

最新推荐文章于 2024-03-21 16:43:24 发布

viceen

最新推荐文章于 2024-03-21 16:43:24 发布

阅读量1.7k

点赞数

分类专栏： react知识 js知识工具文章标签： json javascript nodejs reactjs node.js

本文链接：https://blog.csdn.net/weixin_44867717/article/details/113812759

版权

工具同时被 3 个专栏收录

163 篇文章 6 订阅

订阅专栏

js知识

152 篇文章 12 订阅

订阅专栏

react知识

54 篇文章 1 订阅

订阅专栏

http协议put和patch的区别——put推荐更新全部内容，patch推荐更新部分内容 & fetch发送请求基本用法

http协议的请求方式：put和patch有什么却别吗
- get 查询
- post 添加
- put（patch）更新
  - put推荐更新全部内容，patch推荐更新部分内容
  - 如果更新的资源不存在，put不会创建一个资源；patch推荐创建一个
- delete 删除
fetch这种方式什么时候会用到
- fetch是原生ajax的升级版
- fetch 支持promise

实例

文件目录

在这里插入图片描述

1-测试界面文件

public/index.html，如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div>
    <div>测试fetch api</div>    
    <button id="btn">点击</button>
  </div>
  <script type="text/javascript">
    let btn = document.getElementById('btn')
    btn.onclick = function () {
      // let xhr = new XMLHttpRequest()
      fetch('http://localhost:3001/data')
        .then(res => {
          // 获取后台数据并进行格式转化
          // res.text()表示获取字符串形式的数据
          // return res.text()
          // res.json()表示获取字符串形式的数据
          return res.json()
        })
        .then(res => {
          console.log(res.uname)
        })
    }
  </script>
</body>
</html>

2-模拟数据文件

data.json

3-配置端口文件

index.js文件如下：

const express = require('express');
const path = require('path');
const router = require('./router.js');
const bodyParser = require('body-parser');
const app = express();

// 处理请求参数
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

// 设置允许跨域访问该服务, cors
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', 'Content-Type, mytoken');
  next();
});

// 启动静态资源服务
app.use(express.static('public'));

// app.post('hello', (req,res) => {
//   let p = req.body;
//   res.end('hello');
// })

// 配置路由
app.use(router);
// 监听端口
app.listen(3001, ()=>{
    console.log('running...');
});

4-包文件

package.json文件如下：

{
  "name": "mybook",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.18.3",
    "express": "^4.16.4"
  }
}

5-测试接口文件

router.js文件如下：

/*
  路由模块
*/
const express = require('express');
const router = express.Router();



// 测试接口
router.get('/data', (req, res) => {
  // res.send('hello world')
  // res.json({
  //   uname: 'lisi',
  //   age: 12
  // })
  let data = {
    time: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    data: [820, 932, 901, 934, 1290, 1330, 1320]
  }
  res.json(data)
})

module.exports = router;

6-操作流程

在项目文件中，打开命令行窗口，node index.js，启动服务器

第一种方式

router.js

// 测试接口
router.get('/data', (req, res) => {
  res.send('hello world')
})

module.exports = router;

index.js

// 监听端口
app.listen(3001, ()=>{
    console.log('running...');
});

node index.js 启动服务器

在这里插入图片描述

入口文件public/index.html

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div>
    <div>测试fetch api</div>
    <button id="btn">点击</button>
  </div>
  <script type="text/javascript">
    let btn = document.getElementById('btn')
    btn.onclick = function () {
      // let xhr = new XMLHttpRequest()
      fetch('http://localhost:3001/data')
        .then(res => {
          console.log(res)
          //支持promise写法
          // 获取后台数据并进行格式转化
          // res.text()表示获取字符串形式的数据
          return res.text()
          // res.json()表示获取字符串形式的数据
          // return res.json()
        })
        .then(res => {
          console.log(res)
          // console.log(res.uname)
        })
    }
  </script>
</body>

</html>

打开入口文件

在这里插入图片描述

第二种方式

router.js

// 测试接口
router.get('/data', (req, res) => {
  // res.send('hello world')
  res.json({
    uname: 'lisi',
    age: 12
  })
  // let data = {
  //   time: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  //   data: [820, 932, 901, 934, 1290, 1330, 1320]
  // }
  // res.json(data)
})

module.exports = router;

index.js

// 监听端口
app.listen(3001, ()=>{
    console.log('running...');
});

node index.js 启动服务器

在这里插入图片描述

入口文件public/index.html

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div>
    <div>测试fetch api</div>
    <button id="btn">点击</button>
  </div>
  <script type="text/javascript">
    let btn = document.getElementById('btn')
    btn.onclick = function () {
      // let xhr = new XMLHttpRequest()
      fetch('http://localhost:3001/data')
        .then(res => {
          console.log(res)
          //支持promise写法
          // 获取后台数据并进行格式转化
          // res.text()表示获取字符串形式的数据
          // return res.text()
          // res.json()表示获取字符串形式的数据
          return res.json()
        })
        .then(res => {
          console.log(res)
          // console.log(res.uname)
        })
    }
  </script>
</body>

</html>

打开入口文件

在这里插入图片描述

viceen

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
http协议put和patch的区别——put推荐更新全部内容，patch推荐更新部分内容 & fetch发送请求基本用法

http协议put和patch的区别——put推荐更新全部内容，patch推荐更新部分内容 & fetch发送请求基本用法http协议的请求方式：put和patch有什么却别吗get 查询post 添加put（patch）更新put推荐更新全部内容，patch推荐更新部分内容如果更新的资源不存在，put不会创建一个资源；patch推荐创建一个delete
复制链接

扫一扫

专栏目录