网络编程-JavaScript中发送网络请求汇总

最新推荐文章于 2024-06-13 08:49:48 发布
最新推荐文章于 2024-06-13 08:49:48 发布
阅读量4.7k 收藏 40
点赞数 9
分类专栏： JavaScript高级 文章标签： javascript 网络 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71485750/article/details/125632668
版权

文章目录

1.前后端分离优势

早期的网页都是通过后端渲染来完成的：服务器端渲染（SSR，server side render）：

  • 客户端发出请求 -> 服务端接收请求并返回相应HTML文档 -> 页面刷新，客户端加载新的HTML文档；

服务器端渲染的缺点：

  • 当用户点击页面中的某个按钮向服务器发送请求时，页面本质上只是一些数据发生了变化，而此时服务器却要将重绘的整个页面再返回给浏览器加载，这显然有悖于程序员的“DRY（ Don‘t repeat yourself ）”原则；
  • 而且明明只是一些数据的变化却迫使服务器要返回整个HTML文档，这本身也会给网络带宽带来不必要的开销。

有没有办法在页面数据变动时，只向服务器请求新的数据，并且在阻止页面刷新的情况下，动态的替换页面中展示的数据呢？

  • 答案正是“AJAX”。

AJAX是“Asynchronous JavaScript And XML”的缩写(异步的JavaScript和XML)，是一种实现无页面刷新获取服务器数据的技术。

  • AJAX最吸引人的就是它的“异步”特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

你可以使用AJAX最主要的两个特性做下列事 :

  • 在不重新加载页面的情况下发送请求给服务器；
  • 接受并使用从服务器发来的数据。

这里有两幅图给大家理解一下:

  1. 服务器端渲染

在这里插入图片描述

  1. 前后端分离

在这里插入图片描述

2.HTTP协议的解析

2.1 HTTP的介绍

什么是HTTP呢？我们来看一下维基百科的解释：

  • 超文本传输协议（英语：HyperText Transfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用层协议；
  • HTTP是万维网的数据通信的基础，设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法；
  • 通过HTTP或者HTTPS协议请求的资源由统一资源标识符（Uniform Resource Identifiers，URI）来标识；

HTTP是一个客户端（用户）和服务端（网站）之间请求和响应的标准。

通过使用网页浏览器、网络爬虫或者其它的工具，客户端发起一个HTTP请求到服务器上指定端口（默认端口为80）；

  • 我们称这个客户端为用户代理程序（user agent）；

响应的服务器上存储着一些资源，比如HTML文件和图像。

  • 我们也称这个响应服务器为源服务器（origin server）；

我们网页中的资源通常是被放在Web资源服务器中，由浏览器自动发送HTTP请求来获取、解析、展示的。

目前我们页面中很多数据是动态展示的：

  • 比如页面中的数据展示、搜索数据、表单验证等等，也是通过在JavaScript中发送HTTP请求获取的；

2.2 HTTP的组成

一次HTTP请求主要包括：请求（Request）和响应（Response）(如下图所示)

在这里插入图片描述

请求又包含请求行、请求头、请求体 (如下图所示)

在这里插入图片描述

响应也包含响应行、响应头、响应体 (如下图所示)

在这里插入图片描述

2.3 HTTP的版本

HTTP/0.9

  • 发布于1991年；
  • 只支持GET请求方法获取文本数据，当时主要是为了获取HTML页面内容；

HTTP/1.0

  • 发布于1996年；
  • 支持POST、HEAD等请求方法，支持请求头、响应头等，支持更多种数据类型(不再局限于文本数据) ；
  • 但是浏览器的每次请求都需要与服务器建立一个TCP连接，请求处理完成后立即断开TCP连接，每次建立连接增加了性能损耗；

HTTP/1.1(目前使用最广泛的版本)

  • 发布于1997年；
  • 增加了PUT、DELETE等请求方法；
  • 采用持久连接(Connection: keep-alive)，多个请求可以共用同一个TCP连接；

HTTP/2.0, 2015年

HTTP/3.0, 2018年

2.4 HTTP请求方式

在RFC中定义了一组请求方式，来表示要对给定资源执行的操作：

  • GET：GET 方法请求一个指定资源的表示形式，使用 GET 的请求应该只被用于获取数据。

  • HEAD：HEAD 方法请求一个与 GET 请求的响应相同的响应，但没有响应体。

    比如在准备下载一个文件前，先获取文件的大小，再决定是否进行下载；

  • POST：POST 方法用于将实体提交到指定的资源。

  • PUT：PUT 方法用请求有效载荷（payload）替换目标资源的所有当前表示；

  • DELETE：DELETE 方法删除指定的资源；

  • PATCH：PATCH 方法用于对资源应部分修改；

  • CONNECT：CONNECT 方法建立一个到目标资源标识的服务器的隧道，通常用在代理服务器，网页开发很少用到。

  • TRACE：TRACE 方法沿着到目标资源的路径执行一个消息环回测试。

在开发中使用最多的是GET、POST请求；

  • 在后续的后台管理项目中，我们也会使用PATCH、DELETE请求；

2.5 HTTP请求头字段

在request对象的header中也包含很多有用的信息，客户端会默认传递过来一些信息(如下) :

在这里插入图片描述

content-type: 这次请求携带的数据的类型

  • application/x-www-form-urlencoded：表示数据被编码成以 ‘&’ 分隔的键 - 值对，同时以 ‘=’ 分隔键和值
  • application/json：表示是一个json类型；
  • text/plain：表示是文本类型；
  • application/xml：表示是xml类型；
  • multipart/form-data：表示是上传文件；

content-length：文件的大小长度

keep-alive :

  • http是基于TCP协议的，但是通常在进行一次请求和响应结束后会立刻中断；
  • 在http1.0中，如果想要继续保持连接：
    • 浏览器需要在请求头中添加 connection: keep-alive；
    • 服务器需要在响应头中添加 connection:keey-alive；
    • 当客户端再次放请求时，就会使用同一个连接，直接一方中断连接；
  • 在http1.1中，所有连接默认是 connection: keep-alive的；
    • 不同的Web服务器会有不同的保持 keep-alive的时间；
    • Node中默认是5s中；

accept-encoding：告知服务器，客户端支持的文件压缩格式，比如js文件可以使用gzip编码，对应 .gz文件；

accept：告知服务器，客户端可接受文件的格式类型；

user-agent：客户端相关的信息；

2.6 HTTP响应状态码

Http状态码（Http Status Code）是用来表示Http响应状态的数字代码：

  • Http状态码非常多，可以根据不同的情况，给客户端返回不同的状态码；
常见HTTP状态码状态描述信息说明
200OK客户端请求成功
201CreatedPOST请求，创建新的资源
301Moved Permanently请求资源的URL已经修改，响应中会给出新的URL
400Bad Request客户端的错误，服务器无法或者不进行处理
401Unauthorized未授权的错误，必须携带请求的身份信息
403Forbidden客户端没有权限访问，被拒接
404Not Found服务器找不到请求的资源。
500Internal Server Error服务器遇到了不知道如何处理的情况。
503Service Unavailable服务器不可用，可能处理维护或者重载状态，暂时无法访问

更多响应码介绍在MDN文档上, 链接给到大家: MDN上响应码文档: https://developer.mozilla.org/zh-CN/docs/web/http/status

2.7 HTTP响应头

响应的header中包括一些服务器给客户端的信息：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L3n6aQgp-1657070357626)(img/Snipaste_2022-07-05_11-06-57.png)]

3.AJAX网络请求

3.1 AJAX发送请求

AJAX 是异步的 JavaScript 和 XML（Asynchronous JavaScript And XML）

  • 它可以使用 JSON，XML，HTML 和 text 文本等格式发送和接收数据；

如何来完成AJAX请求呢？

  • 第一步：创建网络请求的AJAX对象（使用XMLHttpRequest）

  • 第二步：监听XMLHttpRequest对象状态的变化，或者监听onload事件（请求完成时触发）；

  • 第三步：配置网络请求（通过open方法）, open方法可以传入两个参数；

    参数一: method(请求的方式: get, post …)

    参数二: url(请求的地址)

  • 第四步：发送send网络请求；

【演示代码】

// 1.创建网络请求对象
const xhr = new XMLHttpRequest()

// 2.监听对象状态的变化
xhr.addEventListener("readystatechange", function() {
  // 拿到网络请求的结果
  console.log(xhr.response)
})

// 3.配置网络请求
// 参数一: 请求的方式; 参数二: 要请求的url地址
xhr.open("get", "http://192.168.0.110:1888")

// 4.发生网络请求
xhr.send()

发送同步请求：

  • 我们发送网络请求, 默认是异步的, 但是我们也可以发送同步的网络请求

  • 我们是需要将open的第三个参数设置为false (默认时true), 就可以开启同步的请求

  • 当然我们实际开发还是用异步的请求

// 开启同步
xhr.open("get", "http://192.168.0.110:1888", false)

3.2 XHR的状态

事实上，我们在一次网络请求中看到状态发生了很多次变化，这是因为对于一次请求来说包括如下的状态:

值状态描述
0UNSENT代理被创建，但尚未调用 open() 方法。
1OPENEDopen() 方法已经被调用。
2HEADERS_RECEIVEDsend() 方法已经被调用，并且头部和状态已经可获得。
3LOADING下载中；responseText 属性已经包含部分数据。
4DONE下载操作已完成。

状态0我们是监听不到的

例如: 我们想要获取结果, 应该在下载操作已完成后获取

// 1.创建网络请求对象
const xhr = new XMLHttpRequest()

// 2.监听对象状态的变化
xhr.addEventListener("readystatechange", function() {
  // 状态不为4的话直接return
  if (xhr.readyState !== XMLHttpRequest.DONE) return
  
  // 拿到的结果是一个字符串, 我们可以转成js对象
  const resJSON = JSON.parse(xhr.response)
  console.log(resJSON)
})

// 3.配置网络请求
// 参数一: 请求的方式; 参数二: 要请求的url地址
xhr.open("get", "http://192.168.0.110:1888")

// 4.发生网络请求
xhr.send()

注意<：这个状态并非是HTTP的响应状态，而是记录的XMLHttpRequest对象的状态变化。

  • http响应状态通过status获取；

3.3 XHR其他事件监听

我们除了可以监听readystatechange之外, 还有其他的事件可以监听

  • loadstart：请求开始。
  • progress： 一个响应数据包到达，此时整个 response body 都在 response 中。
  • abort：调用 xhr.abort() 取消了请求。
  • error：发生连接错误，例如，域错误。不会发生诸如 404 这类的 HTTP 错误。
  • load：请求成功完成。
  • timeout：由于请求超时而取消了该请求（仅发生在设置了 timeout 的情况下）。
  • loadend：在 load，error，timeout 或 abort 之后触发。

我们也可以在load中获取请求数据：

// 在load中获取请求结果
xhr.addEventListener("load", function() {
  console.log(xhr.response)
})

3.4 响应数据和响应类型

发送了请求后，我们需要获取对应的结果：response属性

  • XMLHttpRequest response 属性返回响应的正文内容；
  • 返回的类型取决于responseType的属性设置

通过responseType可以设置获取数据的类型

  • 如果将 responseType 的值设置为空字符串，则会使用 text 作为默认值。
  • 设置数据类型, 一般在监听事件之后, 且在send方法之前
const xhr = new XMLHttpRequest()

xhr.addEventListener("load", function() {
  console.log(xhr.response)
})

// 由于responseType默认值为test, 因此我们拿到的结果是一个字符串
// 告知xhr获取的数据为json类型
xhr.responseType = "json"

// json类型接口
xhr.open("get", "http://123.207.32.32:8000/home/multidata")

xhr.send()

和responseText、responseXML的区别：

  • 早期通常服务器返回的数据是普通的文本和XML，所以我们通常会通过responseText、 responseXML来获取响应结果 , 之后将它们转化成JavaScript对象形式；
  • 目前服务器基本返回的都是json数据，直接设置为json即可；

3.5 HTTP的响应状态

前面我们提到, XMLHttpRequest的state是用于记录xhr对象本身的状态变化，并非针对于HTTP的网络请求状态。

如果我们希望获取HTTP响应的网络状态，可以通过status和statusText来获取：

  • status是获取状态码
  • statusText是获取状态描述
const xhr = new XMLHttpRequest()

xhr.addEventListener("load", function() {
  console.log(xhr.response)
  // 1.获取状态码
  console.log(xhr.status) // 200
  // 2.获取状态描述
  console.log(xhr.statusText) // OK
})

xhr.responseType = "json"

xhr.open("get", "http://123.207.32.32:8000/home/multidata")

xhr.send()

我们写一个不存在的接口, 测试一下状态码和状态描述

const xhr = new XMLHttpRequest()

xhr.addEventListener("load", function() {
  console.log(xhr.response) // null
  // 1.获取状态码
  console.log(xhr.status) // 404
  // 2.获取状态描述
  console.log(xhr.statusText) // Not Found
})

xhr.responseType = "json"

xhr.open("get", "http://123.207.32.32:8000/aaa/bbb/ccc")

xhr.send()

大家可以再看看刚刚的常用状态码表格

常见HTTP状态码状态描述信息说明
200OK客户端请求成功
201CreatedPOST请求，创建新的资源
301Moved Permanently请求资源的URL已经修改，响应中会给出新的URL
400Bad Request客户端的错误，服务器无法或者不进行处理
401Unauthorized未授权的错误，必须携带请求的身份信息
403Forbidden客户端没有权限访问，被拒接
404Not Found服务器找不到请求的资源。
500Internal Server Error服务器遇到了不知道如何处理的情况。
503Service Unavailable服务器不可用，可能处理维护或者重载状态，暂时无法访问

3.7 GET/POST传递参数

在开发中，我们使用最多的是GET和POST请求，在发送请求的过程中，我们也可以传递给服务器数据。

常见的传递给服务器数据的方式有如下几种 :

  • 方式一：GET请求的query参数(常用)

    const xhr = new XMLHttpRequest()

xhr.addEventListener("load", function() {
  // 传入的参数服务器会返回
  console.log(xhr.response)
})

xhr.responseType = "json"

// 在传入的url输入查询字符串传递参数
xhr.open(
  "get", 
	"http://123.207.32.32:1888/02_param/get?name=kaisa&age=18&address=成都市"
)

xhr.send()

    请求结果

在这里插入图片描述

  • 方式二：POST请求 x-www-form-urlencoded 格式

    const xhr = new XMLHttpRequest()

xhr.addEventListener("load", function() {
  console.log(xhr.response)
})

xhr.responseType = "json"

// 1.发送post请求
xhr.open("post", "http://123.207.32.32:1888/02_param/posturl")

// 2.告知服务器要发送数据的格式
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
// 3.在请求体中传入参数
xhr.send("name=kaisa&age=18&address=成都市")

    请求结果

在这里插入图片描述

  • 方式三：POST请求 FormData 格式

  • 方式四：POST请求 JSON 格式(常用)

    const xhr = new XMLHttpRequest()

xhr.addEventListener("load", function() {
  console.log(xhr.response)
})

xhr.responseType = "json"

// 1.发送post请求
xhr.open("post", "http://123.207.32.32:1888/02_param/posturl")

// 2.告知服务器要发送数据的格式
xhr.setRequestHeader("Content-type", "application/json")

// 3.发送JSON格式的字符串
xhr.send(JSON.stringify({ name: "kaisa", age: 18, height: 1.88 }))

    请求结果

在这里插入图片描述

4.AJAX网络请求封装

在实际开发中, 我们并不会自己封装AJAX, 而是直接使用axios库, 再对axios库进行二次封装

我们封装AJAX原因是借此练习一下前面所学的知识

由于我们每次使用网络请求, 都写写很多行同样的代码, 使用起来是非常不方便的, 我们封装的目的就是为了使用起来更方便

封装步骤的解释写在代码注释里面, 源代码和测试代码给大家

// 定义一个函数封装ajax,
// 由于使用参数可能会传很多个, 因此我们可以让使用者传入一个对象
function myajax({
  url,
  method = "get",
  date = {},
  success,
  failure
} = {}) {
  // 1.创建对象
  const xhr = new XMLHttpRequest()

  // 2.监听数据
  xhr.onload = function() {
    // 用响应码判断是否成功
    if (xhr.status >= 200 && xhr.status < 300) {
      success && success(xhr.response)
    } else {
      failure && failure({ status: xhr.status, message: xhr.statusText })
    }
  }

  // 3.设置响应类型
  xhr.responseType = "json"

  // 考虑get请求放在date对象中的情况单独处理
  if (method.toUpperCase() === "GET") {
    const urlStrings = []
    for (key in date) {
      urlStrings.push(`${key}=${date[key]}`)
    }
    url = url + "?" + urlStrings.join("&")

    xhr.open(method, url)
    xhr.send()
  } else {
    // 4.open方法
    xhr.open(method, url)

    // 5.send方法
    xhr.setRequestHeader("Content-type", "application/json")
    xhr.send(JSON.stringify(date))
  }
}

// 测试get请求
myajax({
  url: "http://123.207.32.32:1888/02_param/get",
  date: {
    name: "get",
    age: 18
  },
  // 传入一个请求成功的回调
  success: function(res) {
    console.log(res)
  },
  // 传入失败的回调
  failure: function(err) {
    console.log("err", err)
  }
})

// 测试post请求
myajax({
  url: "http://123.207.32.32:1888/02_param/posturl",
  method: "post",
  // 传入一个请求成功的回调
  success: function(res) {
    console.log(res)
  },
  date: {
    name: "post",
    age: 18
  },
  // 传入失败的回调
  failure: function(err) {
    console.log("err", err)
  }
})

我们对上面的基本封装做一点优化, 为了防止回调地狱的情况出现, 我们可以返回一个promise, 并且不需要再传入成功的回调和失败的回调, 因为promise中有

function myajax({
  url,
  method = "get",
  date = {}
} = {}) {
  // 返回一个promise
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()    

    xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status < 300) {
        // 使用resolve成功的回调
        resolve(xhr.response)
      } else {
        // 使用reject失败的回调
        reject({ status: xhr.status, message: xhr.statusText })
      }
    }   

    xhr.responseType = "json"   

    if (method.toUpperCase() === "GET") {
      const urlStrings = []
      for (key in date) {
        urlStrings.push(`${key}=${date[key]}`)
      }
      url = url + "?" + urlStrings.join("&")    

      xhr.open(method, url)
      xhr.send()
    } else {
      xhr.open(method, url)   

      xhr.setRequestHeader("Content-type", "application/json")
      xhr.send(JSON.stringify(date))
    }
  })
}

// 测试get请求
myajax({
  url: "http://123.207.32.32:1888/02_param/get",
  date: {
    name: "get",
    age: 18
  }
// then中成功的结果
}).then(res => {
  console.log(res)
// catch中失败的结果
}).catch(err => {
  console.log(err)
})

// 测试post请求
myajax({
  url: "http://123.207.32.32:1888/02_param/posturl",
  method: "post",
  date: {
    name: "post",
    age: 18
  }
// then中成功的结果
}).then(res => {
  console.log(res)
// catch中失败的结果
}).catch(err => {
  console.log(err)
})

补充: 过期时间和取消请求

下面我用的是一个延时的接口

过期时间

在网络请求的过程中，为了避免过长的时间服务器无法返回数据，通常我们会为请求设置一个超时时间：timeout。

  • 当达到超时时间后依然没有获取到数据，那么这个请求会自动被取消掉；
  • 默认值为0，表示没有设置超时时间；

下面写个案例, 如果超过3000毫秒没有请求到数据就取消本次网络请求

  • 请求超时可以在timeout中监听
const xhr = new XMLHttpRequest()

xhr.addEventListener("load", function() {
  console.log(xhr.response)
})

// 请求超时可以在timeout中监听
xhr.addEventListener("timeout", function() {
  console.log("请求超时")
})

xhr.responseType = "json"

xhr.timeout = 3000

xhr.open("get", "http://123.207.32.32:1888/01_basic/timeout")

xhr.send()
取消请求

取消网络请求, 我们也可以通过abort方法强制 (手动) 取消请求；

  • 请求取消可以在abort中监听

<button>取消请求</button>

<script>
  const xhr = new XMLHttpRequest()  

  xhr.addEventListener("load", function() {
    console.log(xhr.response)
  })  

  // 请求取消可以在abort中监听
  xhr.addEventListener("abort", function() {
    console.log("请求已取消")
  })  

  xhr.responseType = "json" 

  xhr.timeout = 3000  

  xhr.open("get", "http://123.207.32.32:1888/01_basic/timeout") 

  xhr.send()  

	// 监听按钮点击取消请求
  const btnEl = document.querySelector("button")
  btnEl.onclick = function() {
    xhr.abort()
  }
</script>

5.Fetch使用和上传文件

5.1 Fetch基本使用

Fetch可以看做是早期的XMLHttpRequest的替代方案，它提供了一种更加现代的处理方案：

比如返回值是一个Promise，提供了一种更加优雅的处理结果方式

  • 在请求发送成功时，调用resolve回调then；
  • 在请求发送失败时，调用reject回调catch；

比如不像XMLHttpRequest一样，所有的操作都在一个对象上

fetch函数的使用：

fetch(input[, init])

input：定义要获取的资源地址，可以是一个URL字符串，也可以使用一个Request对象（实验性特性）类型；

init：其他初始化参数, 是一个对象

  • method: 请求使用的方法，如 GET、POST；
  • headers: 请求的头信息；
  • body: 请求的 body 信息；

【演示代码】

发送一个get请求(先了解一下 马上会详细分析)

fetch("http://123.207.32.32:8000/home/multidata").then(res => {
  // 获取具体的结果还需调用一次
  // 如果是文本就res.text, 其他的同样的道理
  res.json().then(res => {
    console.log(res)
  })
}).catch(err => {
  console.log(err)
})

5.2 Fetch数据的响应

Fetch的数据响应主要分为两个阶段 :

阶段一：当服务器返回了响应（response）

  • fetch 返回的 promise 就使用内建的 Response class 对象来对响应头进行解析；
  • 在这个阶段，我们可以通过检查响应头，来检查 HTTP 状态以确定请求是否成功；
  • 如果 fetch 无法建立一个 HTTP 请求，例如网络问题，亦或是请求的网址不存在，那么 promise 就会 reject；
  • 异常的 HTTP 状态，例如 404 或 500，不会导致出现 error；

我们可以在 response 的属性中看到 HTTP 状态：

  • status：HTTP 状态码，例如 200；
  • ok：布尔值，如果 HTTP 状态码为 200-299，则为 true；
fetch("http://123.207.32.32:8000/home/multidata").then(res => {
  
  // response中查看状态码, 状态描述
  console.log(res.status) // 200
  console.log(res.statusText) // OK
  console.log(res.ok) // true

}).catch(err => {
  console.log(err)
})

第二阶段，为了获取 response body，我们需要使用一个其他的方法调用, 这个方法同样返回Promise。

  • response.text() —— 读取 response，并以文本形式返回 response；
  • response.json() —— 将 response 解析为 JSON；
fetch("http://123.207.32.32:8000/home/multidata").then(res => {
  
  // 第二阶段, 同样返回Promise
  res.json().then(res => {
    // 拿到最终结果
    console.log(res)
  })

}).catch(err => {
  console.log(err)
})

5.3 Fetch网络请求的演练

基于Promise的使用方案：

fetch("http://123.207.32.32:8000/home/multidata").then(res => {
  // 获取具体的结果还需调用一次
  // 如果是文本就res.text, 其他的同样的道理
  return res.json()
}).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

基于async、await的使用方案：

async function getDate() {
  const response1 = await fetch("http://123.207.32.32:8000/home/multidata")
  const response2 = await response1.json()
  // 打印结果
  console.log(response2)
}

getDate()

5.4 Fetch POST请求

创建一个 POST 请求，或者其他方法的请求，我们需要使用 fetch 选项：

method：HTTP 方法，例如 POST，

body：request body，其中之一：

  • 字符串（例如 JSON 编码的），
  • FormData 对象，以 multipart/form-data 形式发送数据，
async function getDate() {
  // post请求需要在fetch方法中传入第二个参数
  const response1 = await fetch("http://123.207.32.32:1888/02_param/postjson",{
    method: "post",
    headers: {
      "Content-type": "application/json"
    },
    // 参数防砸body中
    body: JSON.stringify({
      username: "aaa",
      postname: "123456"
    })
  })
  const response2 = await response1.json()
  // 打印结果
  console.log(response2)
}

getDate()
fetch("http://123.207.32.32:8000/home/multidata")
  const response2 = await response1.json()
  // 打印结果
  console.log(response2)
}

getDate()

5.4 Fetch POST请求

创建一个 POST 请求，或者其他方法的请求，我们需要使用 fetch 选项：

method：HTTP 方法，例如 POST，

body：request body，其中之一：

  • 字符串（例如 JSON 编码的），
  • FormData 对象，以 multipart/form-data 形式发送数据，
async function getDate() {
  // post请求需要在fetch方法中传入第二个参数
  const response1 = await fetch("http://123.207.32.32:1888/02_param/postjson",{
    method: "post",
    headers: {
      "Content-type": "application/json"
    },
    // 参数防砸body中
    body: JSON.stringify({
      username: "aaa",
      postname: "123456"
    })
  })
  const response2 = await response1.json()
  // 打印结果
  console.log(response2)
}

getDate()
学全栈的灌汤包
关注
  • 9
    点赞
  • 踩
  • 40
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
面试常见题汇总1
08-08
面试常见题汇总1 标题和描述中所说的知识点是关于前端开发面试题的总结，特别是关于AJAX、Promise、箭头函数、链式调用和观察者模式等知识点的详细介绍。 一、AJAX流程： AJAX（Asynchronous JavaScript and XML...
javascript前端知识汇总
06-24
以下是对标题"javascript前端知识汇总"和描述中所述知识点的详细说明： 1. **基础语法**：JavaScript的基础包括变量、数据类型（如字符串、数字、布尔、null、undefined、对象和数组）、操作符（算术、比较、逻辑、...
原生 JavaScript 发送请求
weixin_67724481的博客
02-04 1314
Fetch API是现代浏览器提供的用于处理网络请求的强大工具。它提供了一种简单、灵活和强大的方式来获取数据，而无需依赖旧的。
用 JavaScript 发起 HTTP 请求的几种方法
一只小松鼠_的博客
03-22 3886
我们刚刚了解了在 JavaScript 中最常用的创建 HTTP 请求的几种方式。
【网络安全零基础入门必知必会】Javascript实现Post请求、Ajax请求、输出数据到页面、实现前进后退、文件上传（02）
最新发布
Libra1313的博客
06-13 671
这是大白给粉丝朋友准备的网络安全零基础入门第五章Javascript的知识章节里的Javascript实现效果示例。
【JavaScript】发送HTTP请求
好久不见的流星
02-15 1298
在 JavaScript 中，发送 HTTP 请求的方式有多种，选择适合自己项目需求的方式是很重要的。XMLHttpRequest 提供了基本的功能，Fetch API 提供了更现代的 API，而 Axios 则是一个流行的第三方库，提供了更多便捷的特性。根据项目的需求和个人偏好选择适合的方式进行 HTTP 请求。希望通过本篇博客，你对 JavaScript 中发送 HTTP 请求的几种方式有了更深入的了解。
JavaScript学习—网络请求
qq_57101277的博客
05-08 464
在 JavaScript 中，对象是一个用于与服务器交换数据的接口，允许在后台与服务器进行异步通信。这使得网页可以在不中断用户交互的情况下从服务器请求数据。
JavaScript_学习10
H_zhiyi的博客
09-12 156
总结步骤: 创建HttpRequest对象 我们需要判断浏览器，不同的浏览器创建这个HttpRequest对象的时候，是使用的对象不同 window.XMLHttpRequest-----IE7+, Firefox, Chrome, Opera, Safari 浏览器— XMLHttpRequest ----IE5,IE6浏览器------ActiveXObject(“Microsoft.XMLHTTP”); 2.请求发送以后的处理动作 XMLHttpRequest 对象属性 属性 描述
nodejs做http请求转发，解决js跨域问题(一)
weixin_45953930的博客
04-26 1333
解决js跨域，常见的方式有下几种 1.JSONP 2.CROS 3.通过中间server做转发 今天我们来讲一下用nodejs来做http请求的转发 需要用到的模块 express、path、http-proxy-middleware 新建一个Proxy目录，在目录里新建一个proxy.js var express = require(‘express’); var proxy = require(‘http-proxy-middleware’); var app = express(); var path
JS实现使用POST方式发送请求
12-03
[removed].href是我们常用来在js中实现页面跳转的方法，这是使用get方式发送请求，示例如下 [removed].href = url; 优点是简单易用，缺点是如果有参数的话，参数会暴露在url地址中，这降低了系统的安全性，也影响用户体验。下面我们来讲下如何通过POST请求实现页面跳转。 //发送POST请求跳转到指定页面 function httpPost(URL, PARAMS) { var temp = document.createElement("form"); temp.action = URL; temp.method = "post
毕业设计论文-源码-ASP网络教学评判系统(设计源码).zip
05-17
总之，这个【ASP网络教学评判系统】的源码和论文是学习ASP编程、网站开发和教育信息化管理的理想材料，有助于提升开发者在实际项目中的技能和经验。通过深入研究，不仅能够掌握ASP技术，还能了解到教育领域的信息化...
rss-aggregator:一项易于阅读和汇总RSS提要的服务
04-03
1. **JavaScript**：作为客户端和服务器端的主要编程语言。JavaScript通常用于构建Web应用的前端交互，同时也可以借助Node.js在后端进行处理。 2. **前端框架**：可能使用React、Vue或Angular等现代JavaScript框架，...
html 加载时 js 网络请求没有执行
金戈铁马
11-03 784
是因为js 文件里有一个 引号写错成了中文的引号。
js 发送http请求
热门推荐
harryhare的专栏
03-11 3万+
最简单的方法自然是jquery $.get(); $.post(); //example var params = {id:1,name:'tom'}; url = '/test_post.php'; $.post(url,params,function(data){ alert(data);//这个data就是test_post.php返回的数据 }); 但是有的网站并没有加载...
JS如何发送HTTP请求
weixin_42336606的博客
08-21 2万+
首先在html文档中准备一个区域用来显示请求返回的内容，并且给onload事件绑定好方法，如下图所示 然后我们建立一个XMLHttpRequest请求对象，如下图所示 3 接下来处理xmlhttprequest的onload方法，如下图所示，判断返回的状态码是不是200，200代表的是成功 接下来，调用请求对象的open方法，设置请求的方式为...
几种常用网络请求汇总
weixin_44766633的博客
09-08 757
0.  前言从我们在浏览器的地址栏输入http://blog.csdn.net/seu_calvin后回车，到我们看到该博客的主页，这中间经历了什么呢？简单地回答这个问题，大概是经历了域名解析、TCP的三次握手、建立TCP连接后发起HTTP请求、服务器响应HTTP请求、浏览器解析h...
Web网页播放器
池鱼 - YiiGaa
01-05 7320
Web网页播放器简述0 引言1 介绍1.1 背景1.2 前提知识2 播放器2.1 Flash2.2 VideojsJW PlayerClapprMediaElement.jsFlv.js3 后记 0 引言 本博客是关于网页播放器简述，是后续网页播放器制作详解的开端，以下都是本人亲身经历和切身感受。此博客秉承以下原则： 没有原理性介绍，我不是这个工具的作者，写了也是抄的。 没有太详细的操作步骤，操...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学全栈的灌汤包

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值