Ajax超详解(新手入门指南)

news/2024/4/24 22:52:47/

文章目录

  • 1. AJAX简介
  • 2. 前后端交互
  • 3. XHR
    • 3.1 XMLHttpRequest对象
    • 3.2 获取模拟的后端数据
    • 3.3 获取网络数据
    • 3.4 使用json-server模拟服务器
      • 3.4.1 安装node.js
      • 3.4.2 安装并使用json-server
    • 3.5 常见的请求方式
      • 3.5.1 GET请求
      • 3.5.2 POST请求
      • 3.5.3 PUT请求
      • 3.5.4 PATCH请求
      • 3.5.5 DELETE请求
  • 4. Fetch
    • 4.1 Fetch API
    • 4.2 使用Fetch完成请求
      • 4.2.1 GET请求
      • 4.2.2 POST请求
      • 4.2.3 PUT请求
      • 4.2.4 PATCH请求
      • 4.2.5 DELETE请求
  • 5. Axios
    • 5.1 Axios API
    • 5.2 使用Axios完成请求

1. AJAX简介

AJAX:全称是Asynchronous JavaScript And XML,即异步的JavaScript和XML。AJAX是用于前后端交互的工具,也就是说通过AJAX作为桥梁,客户端可以给服务端发送消息,也可以接收服务端的响应消息。

AJAX的两种实现方式:

  • XHR:使用XMLHttpRequest对象来实现AJAX
  • Fetch:使用Fetch API来实现AJAX

XHRFetch 的区别:

功能点XHRFetch
基本的请求能力
基本的获取响应能力
监控请求进度
监控响应进度
Service Worker中是否可用
控制cookie的携带
控制重定向
请求取消
自定义referrer
API风格EventPromise
活跃度停止更新不断更新

2. 前后端交互

由于AJAX是用于前后端交互的工具,为了更方便并深入的理解AJAX以及后续对它的实现,需要补充一下前后端交互的相关知识。

前后端交互使用的协议是HTTP协议,该协议规定了两个方面的内容:

  • 传递消息的模式
  • 传递消息的格式

1.传递消息的模式为「请求-响应」模式

  • 发起请求的称之为客户端,接收请求并完成响应的称之为服务器。
  • 「请求-响应」完成后,一次交互结束。

在这里插入图片描述

2.传递消息的格式是纯文本格式,分为以下三部分

请求行
请求头请求体

在这里插入图片描述

3. XHR

为了节省学习的成本,本文专注于讲解前端的内容,对于后端的部分,使用模拟的数据以及现有的工具来完成对后端的实现。

通过以下三种方式,来模拟后端,由浅入深的展开Ajax:

  • 使用JSON文件模拟后端返回的数据
  • 调用网络接口来获取后端返回的数据
  • 使用json-server模拟服务器来实现各种请求方式

3.1 XMLHttpRequest对象

1.XMLHttpRequest 对象的方法

方法描述
abort()中止当前请求
getAllResponseHeaders()返回所有的响应头
getResponseHeader()返回特定的响应头
open()规定请求的方式
send()发送请求到服务器
setRequestHeader()设置请求头

2.XMLHttpRequest 对象的属性

属性描述
onreadystatechange定义当 readyState 属性发生变化时被调用的函数
readyState保存 XMLHttpRequest 的状态
responseText以字符串返回响应数据
responseXML以 XML 数据返回响应数据
status返回请求的状态号
statusText返回状态文本

3.2 获取模拟的后端数据

现在前后端交互的文本数据,常用的是json格式的文本数据,因此这里使用json文件,来模拟后端返回的数据。

在当前页面同级目录下,新建一个test.json,模拟后端返回的数据,内容如下

{"name": "Bill","age": 18
}

1.向服务器发送请求

open(method, url, async):初始化一个新创建的请求,或重新初始化一个请求

  • method:请求的方式,如 GET、POST等
  • url:服务器文件的位置
  • async:是否异步执行操作,异步为true
var xhr = new XMLHttpRequest();
xhr.open("GET", "test.json", true); // 创建请求,以GET请求的方式,请求服务器的test.json
xhr.send(); // 发送请求

F12,再刷新页面,点击Network,再选中Fetch/XHR,可以看到有一个test.json文件

在这里插入图片描述

双击test.json,再选中Response,可以看到响应的数据内容就是test.json中的内容

在这里插入图片描述

2.根据 XMLHttpRequestHTTP 的状态,判断请求是否成功,并获取响应数据

  • onreadystatechange:定义当 readyState 属性发生变化时被调用的函数(触发readystatechange事件)
  • readyState:XMLHttpRequest 的状态
    • 0:请求未初始化
    • 1:服务器连接已建立
    • 2:请求已接收
    • 3:正在处理请求
    • 4:请求已完成且响应已就绪
  • statusHTTP 的状态码,200-299表示请求成功,具体状态码含义可参考 常见的HTTP状态码汇总
    • 200:OK
    • 403:Forbidden
    • 404:Not Found
  • responseText:以字符串形式返回的响应数据

注:通过以上可以得出,当readyState === 4status范围在 [200,300)时,表示本次请求正常完成。

var xhr = new XMLHttpRequest();
xhr.open("GET", "test.json", true);
xhr.send();// readyState属性发生变化时调用的函数
xhr.onreadystatechange = function () {if (xhr.readyState === 4) { // 请求已完成且响应已就绪if (xhr.status === 200) { // 请求成功console.log(JSON.parse(xhr.responseText)); // 打印服务器的响应文本} else {console.log(xhr.status, xhr.statusText); // 打印响应状态码和响应状态文本console.log(xhr.responseText);}}
};

刷新页面,运行结果如下:

在这里插入图片描述

通过修改以上代码中的test.jsontest1.json,构造请求服务器中不存在的文件,运行结果如下:

在这里插入图片描述

3.可以使用onload属性代替onreadystatechangereadyState === 4的情况

注:onload属性表示当一个XMLHttpRequest请求完成的时候会触发load事件

var xhr = new XMLHttpRequest();
xhr.open("GET", "test.json", true);
xhr.send();// XMLHttpRequest请求完成的时候会触发load事件
xhr.onload = function () {// 使用正则表达式,判断xhr.status范围是否在[200,300)if (/^2\d{2}$/.test(xhr.status)) {console.log(JSON.parse(xhr.responseText));} else {console.log(xhr.status, xhr.statusText);console.log(xhr.responseText);}
};

3.3 获取网络数据

调用网络接口,将模拟的数据,改为网络的真实数据。

将上面代码中的test.json改为以下网络地址即可:

http://www.xiongmaoyouxuan.com/api/tabs

1.向网络服务器请求

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://www.xiongmaoyouxuan.com/api/tabs", true); 
xhr.send();// XMLHttpRequest请求完成的时候会触发load事件
xhr.onload = function () {if (/^2\d{2}$/.test(xhr.status)) {console.log(JSON.parse(xhr.responseText));} else {console.log(xhr.status, xhr.statusText);console.log(xhr.responseText);}
};

运行结果如下:

在这里插入图片描述

由于json数据过长,在此处贴出部分数据作为参照:

{"code": 200,"data": {"list": [{"commoditiesBoardId": 0,"id": 1,"name": "今日推荐","imageUrl": "http://img1.lukou.com/static/p/fb/tab/1/20181211-151644.jpeg","extraData": "{\"need_banner\": 1, \"category_id\": 13, \"need_grid\": 1}","flowBoardId": 89,"note": "小编精选,全场特惠 (ง •̀_•́)ง","gridsBoardId": 3,"bannerBoardId": 2,"feedsBoardId": 0,"categoryId": 0},{"commoditiesBoardId": 157,"id": 2,"name": "女装","imageUrl": "http://img1.lukou.com/static/p/fb/tab/2/20190220-155007.png","extraData": "{\"category_id\": 1, \"fe_category_id\": 1689}","flowBoardId": 75,"note": "","gridsBoardId": 4,"bannerBoardId": 0,"feedsBoardId": 5,"categoryId": 1689}]}
}

2.对服务器返回的数据进行处理,并渲染到页面上

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button>点击查询商品</button><ul><li><p>今日推荐</p><img src="http://img1.lukou.com/static/p/fb/tab/1/20181211-151644.jpeg" /></li></ul><script>var btn = document.querySelector("button");var ul = document.querySelector("ul");// 注册点击事件btn.onclick = function () {var xhr = new XMLHttpRequest();xhr.open("GET", "http://www.xiongmaoyouxuan.com/api/tabs", true);xhr.send();// XMLHttpRequest请求完成的时候会触发load事件xhr.onload = function () {if (/^2\d{2}$/.test(xhr.status)) {var responseData = JSON.parse(xhr.responseText); // 响应数据console.log(responseData);render(responseData); // 渲染数据} else {console.log(xhr.status, xhr.statusText);console.log(xhr.responseText);}};};// 处理获取的响应数据,并将其渲染到页面上function render(responseData) {var commodityList = responseData.data.list.map(function (commodity) {return `<li><p>${commodity.name}</p><img src="${commodity.imageUrl}" /></li>`;});console.log(commodityList);ul.innerHTML = commodityList.join("");}</script></body>
</html>

点击按钮,运行结果如下:

在这里插入图片描述

3.4 使用json-server模拟服务器

json-server可以模拟服务器:下载node.js,并安装json-server,再新建一个json文件,通过json-server来运行这个json文件,此时该json文件就具备了基本的后端服务器的能力,可以完成一些基本的增删改查。

3.4.1 安装node.js

1.下载并安装node.js,进入node官网,选择LTS版本点击下载安装包

node官网地址:https://nodejs.org/en

在这里插入图片描述

2.双击安装包,一直点击Next,完成安装

在这里插入图片描述

3.打开cmd,输入node -vnpm -v,出现版本号则表示安装成功

在这里插入图片描述

4.切换镜像源至国内淘宝镜像源,提高npm下载速度

# 设置镜像源
npm config set registry https://registry.npm.taobao.org 
# 查看镜像源
npm config get registry 

在这里插入图片描述

3.4.2 安装并使用json-server

1.输入以下命令,安装json-server

npm install -g json-server

在这里插入图片描述

2.安装完成json-server以后,再新建一个test.json文件,内容如下

{"users": [{"id": 1,"name": "Bill"},{"id": 2,"name": "Jackson"}],"shopcar": ["女装", "男装", "配饰", "零食", "母婴用品", "箱包"]
}

3.打开cmd,切换路径到test.json所在路径,输入命令 json-server test.json运行服务器,得到服务器地址如下

http://localhost:3000/users
http://localhost:3000/shopcar

在这里插入图片描述

4.当前页面index.html,输入以下内容

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost:3000/users", true); // 向json-server服务器发送请求
xhr.send();xhr.onload = function () {if (/^2\d{2}$/.test(xhr.status)) {console.log(JSON.parse(xhr.responseText));} else {console.log(xhr.status, xhr.statusText);console.log(xhr.responseText);}
};

5.由于json-server会和Live Server冲突,所以不能使用Live Server打开浏览器,可以下载插件Preview on Web Server,使用该插件打开浏览器。

右键点击vscode-preview-server:Launch on browser,打开页面。

在这里插入图片描述

打开控制台,运行结果如下,说明获取到了服务器返回的数据:

在这里插入图片描述

3.5 常见的请求方式

请求方式描述
GET获取数据
POST提交数据
PUT更新全部数据
PATCH更新部分数据
DELETE删除数据
HEAD获取服务器头信息
OPTIONS获取服务器设备信息
CONNECT保留请求方式

3.4节使用json-server模拟服务器的基础之上,来模拟如下5种常见的请求方式。

test.json的内容为3.4.2节中的内容,在test.json所在路径下,输入以下命令启动json-server

json-server test.json --watch

3.5.1 GET请求

GET请求:用于获取服务器的数据。

GET请求的方式有两种:

  • 不带参数的GET请求,获取服务器地址的全部数据
  • 带参数的GET请求,获取服务器地址的特定数据

1.不带参数的GET请求,获取服务器全部数据

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button>GET</button><script>var btn = document.querySelector("button");btn.onclick = function () {var xhr = new XMLHttpRequest();xhr.open("GET", "http://localhost:3000/users", true); // 创建一个GET请求xhr.send();xhr.onload = function () {if (/^2\d{2}$/.test(xhr.status)) {console.log(JSON.parse(xhr.responseText));} else {console.log(xhr.status, xhr.statusText);console.log(xhr.responseText);}};};</script></body>
</html>

右键点击vscode-preview-server:Launch on browser,打开页面并点击GET按钮,运行结果如下:

在这里插入图片描述

2.带参数的GET请求,获取服务器地址的特定数据

如需获取特定数据,在原地址上加上key=value格式的数据即可。

  • key=value:获取单个特定数据
  • key=value&key=value:获取多个特定数据

key=value:比如向服务器请求获取id=1的数据,可以修改http://localhost:3000/usershttp://localhost:3000/users?id=1,运行结果如下:

在这里插入图片描述
key=value&key=value:比如向服务器请求获取id=1以及id=2的数据,可以修改http://localhost:3000/usershttp://localhost:3000/users?id=1&id=2,运行结果如下:

在这里插入图片描述

3.5.2 POST请求

POST请求:用于向服务器提交数据。

POST提交文本数据有两种格式:

  • form格式:也就是key=value格式的字符串,设置content-type为application/x-www-form-urlencoded
  • json格式:也就是json格式的字符串,设置content-type为application/json

1.使用form编码格式的字符串,向服务器提交数据

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button>POST</button><script>var btn = document.querySelector("button");btn.onclick = function () {var xhr = new XMLHttpRequest();xhr.open("POST", "http://localhost:3000/users", true); // 创建一个POST请求xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); // 设置请求头的content-type属性值为form编码data = "name=Michael&age=18"; // form编码格式的数据xhr.send(data); // 发送数据xhr.onload = function () {if (/^2\d{2}$/.test(xhr.status)) {console.log(JSON.parse(xhr.responseText)); } else {console.log(xhr.status, xhr.statusText);console.log(xhr.responseText);}};};</script></body>
</html>

打开页面并点击POST按钮,运行结束后,发现test.json文件新增了刚刚提交的数据

在这里插入图片描述

2.使用json格式的字符串,向服务器提交数据

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button>POST</button><script>var btn = document.querySelector("button");btn.onclick = function () {var xhr = new XMLHttpRequest();xhr.open("POST", "http://localhost:3000/users", true); // 创建一个POST请求xhr.setRequestHeader("content-type", "application/json"); // 设置请求头的content-type属性值为json格式data = JSON.stringify({ name: "Ada", age: 18 }); // json格式的字符串xhr.send(data); // 发送数据xhr.onload = function () {if (/^2\d{2}$/.test(xhr.status)) {console.log(JSON.parse(xhr.responseText));} else {console.log(xhr.status, xhr.statusText);console.log(xhr.responseText);}};};</script></body>
</html>

打开页面并点击POST按钮,运行结束后,发现test.json文件新增了刚刚提交的数据

在这里插入图片描述

3.5.3 PUT请求

PUT请求:用于更新服务器的数据,覆盖式地更新数据,也就是更新全部数据。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button>PUT</button><script>var btn = document.querySelector("button");btn.onclick = function () {var xhr = new XMLHttpRequest();xhr.open("PUT", "http://localhost:3000/users/4", true); // 创建一个PUT请求,请求更新id为4的数据xhr.setRequestHeader("content-type", "application/json"); // 设置请求头的content-type属性值为json格式data = JSON.stringify({ age: 28 }); // 更新agexhr.send(data); // 发送数据xhr.onload = function () {if (/^2\d{2}$/.test(xhr.status)) {console.log(JSON.parse(xhr.responseText));} else {console.log(xhr.status, xhr.statusText);console.log(xhr.responseText);}};};</script></body>
</html>

注:更新的路径要写准确指定,http://localhost:3000/users/4中的/4表示id为4的数据

打开页面并点击PUT按钮,运行结束后,发现test.json文件更新了刚刚发送的age数据,而且是覆盖式更新,以前的name属性数据被覆盖不见了。

在这里插入图片描述

3.5.4 PATCH请求

PATCH请求:用于更新服务器的数据,补丁式地更新数据,也就是更新部分数据。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button>PATCH</button><script>var btn = document.querySelector("button");btn.onclick = function () {var xhr = new XMLHttpRequest();xhr.open("PATCH", "http://localhost:3000/users/3", true); // 创建一个PATCH请求,请求更新id为3的数据xhr.setRequestHeader("content-type", "application/json"); // 设置请求头的content-type属性值为json格式data = JSON.stringify({ age: 28 }); // 更新agexhr.send(data); // 发送数据xhr.onload = function () {if (/^2\d{2}$/.test(xhr.status)) {console.log(JSON.parse(xhr.responseText));} else {console.log(xhr.status, xhr.statusText);console.log(xhr.responseText);}};};</script></body>
</html>

打开页面并点击PATCH按钮,运行结束后,发现test.json文件更新了刚刚发送的age数据,而且是补丁式更新,以前的name属性数据不会被覆盖,依然保持原样。

在这里插入图片描述

3.5.5 DELETE请求

DELETE请求:用于删除服务器的数据。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button>DELETE</button><script>var btn = document.querySelector("button");btn.onclick = function () {var xhr = new XMLHttpRequest();xhr.open("DELETE", "http://localhost:3000/users/4", true); // 创建一个DELETE请求,请求删除id为4的数据xhr.send(); // 发送请求xhr.onload = function () {if (/^2\d{2}$/.test(xhr.status)) {console.log(JSON.parse(xhr.responseText));} else {console.log(xhr.status, xhr.statusText);console.log(xhr.responseText);}};};</script></body>
</html>

打开页面并点击DELETE按钮,运行结束后,发现test.json文件中id为4的数据已被删除。

在这里插入图片描述

4. Fetch

注:要学习Fetch,需要先学习ES6中的Promise以及asyncawait.

使用Fetch进行前后端交互,是通过fetch() 方法发起获取资源的请求,它返回一个 promise,这个 promise 会在请求响应后被 resolve,并传回 Response 对象。

4.1 Fetch API

Fetch API包括以下部分:

  • Headers接口:表示请求头或响应头的信息,允许对 HTTP 请求和响应头执行各种操作。
  • Request接口:表示资源请求
  • Response接口:表示请求的响应数据
  • fetch()方法:用于发起获取资源的请求

Headers对象的方法:

方法描述
Headers.append()给现有的header添加一个值
Headers.set()替换现有的header的值
Headers.get()获取指定header的全部值
Headers.delete()删除指定header

Request对象的属性:

属性描述
Request.method请求方式
Request.url请求的 URL
Request.headers请求相关的Headers对象
Request.credentials请求的证书
Request.mode请求的模式
Request.cache请求的缓存模式

Response对象的属性:

属性描述
Response.headersResponse所关联的Headers对象
Response.statusResponse的状态码
Response.statusText与该Response状态码一致的状态信息
Response.urlResponse的URL

Response对象实例的方法:

方法描述
Response.json()将响应体解析为json对象
Response.text()将响应体解析为字符串
Response.formData()将响应体解析为fromData表单对象
Response.blob()将响应体解析为二进制blob对象
Response.arrayBuffer()将响应体解析为二进制arrayBuffer对象

fetch()方法:

Promise<Response> fetch(input[, init]);

  • input:定义要获取的资源,这可能是:
    • 一个字符串,包含要获取资源的 URL
    • 一个request对象
  • init:一个配置项对象,包括所有对请求的设置。可选的参数有:
    • method: 请求方式
    • headers: 请求头信息
    • body: 请求体信息
    • mode: 请求的模式
    • credentials: 请求的证书
    • cache: 请求的缓存模式
    • redirect: 如何处理重定向模式

4.2 使用Fetch完成请求

依然是使用json-server模拟服务器的情况下,来模拟GET、POST、PUT、PATCH、DELETE,这5种常见的请求方式。

test.json的内容为3.4.2节中的内容,在test.json所在路径下,打开cmd输入以下命令启动json-server

json-server test.json --watch

在这里插入图片描述

4.2.1 GET请求

由于请求是异步的,所以此处使用asyncawait

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button>GET</button><script>const btn = document.querySelector("button");btn.onclick = async function () {const resp = await fetch("http://localhost:3000/users"); // 等待拿到响应头,拿到响应头promise就完成了const data = await resp.json(); // 等待解析响应体,使用json格式解析响应体console.log(resp); // 响应头console.log(data); // 响应体};</script></body>
</html>

右键点击vscode-preview-server:Launch on browser,打开页面并点击GET按钮,运行结果如下:

在这里插入图片描述

以下两行代码,还可以精简为一行:

const resp = await fetch("http://localhost:3000/users"); // 等待拿到响应头,拿到响应头promise就完成了
const data = await resp.json(); // 等待解析响应体,使用json格式解析响应体

精简后:

const data = await fetch("http://localhost:3000/users").then(resp => resp.json());

4.2.2 POST请求

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button>POST</button><script>const btn = document.querySelector("button");btn.onclick = async function () {// 请求的信息init = {method: "POST",headers: { "content-type": "application/json" },body: JSON.stringify({ name: "Ada", age: 18 })};// 发送请求const data = await fetch("http://localhost:3000/users", init).then(resp => resp.json());console.log(data);};</script></body>
</html>

打开页面并点击POST按钮,运行结果如下:

在这里插入图片描述

4.2.3 PUT请求

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button>PUT</button><script>const btn = document.querySelector("button");btn.onclick = async function () {// 请求的信息init = {method: "PUT",headers: { "content-type": "application/json" },body: JSON.stringify({ age: 28 })};// 发送请求const data = await fetch("http://localhost:3000/users/3", init).then(resp => resp.json());console.log(data);};</script></body>
</html>

打开页面并点击PUT按钮,运行结果如下:

在这里插入图片描述

4.2.4 PATCH请求

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button>PATCH</button><script>const btn = document.querySelector("button");btn.onclick = async function () {// 请求的信息init = {method: "PATCH",headers: { "content-type": "application/json" },body: JSON.stringify({ age: 28 })};// 发送请求const data = await fetch("http://localhost:3000/users/2", init).then(resp => resp.json());console.log(data);};</script></body>
</html>

打开页面并点击PATCH按钮,运行结果如下:

在这里插入图片描述

4.2.5 DELETE请求

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button>DELETE</button><script>const btn = document.querySelector("button");btn.onclick = async function () {// 请求的信息init = { method: "DELETE" };// 发送请求const data = await fetch("http://localhost:3000/users/3", init).then(resp => resp.json());console.log(data);};</script></body>
</html>

打开页面并点击DELETE按钮,运行结果如下:

在这里插入图片描述

5. Axios

Axios:是一个基于promise封装的第三方HTTP库,可以用在浏览器和node.js中。

5.1 Axios API

Axios网址:https://www.npmjs.com/package/axios

打开Axios网址,可以看到有一个目录,目录中包含了Axios的安装教程、API使用教程以及例子等等。

在这里插入图片描述

1.安装:安装方法有很多种,这里我们通过引用外部js文件的方式,引入axios库。

<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>

2.API使用方法

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

其中config配置可参考以下内容:

// Send a POST request
axios({method: 'post',url: '/user/12345',data: {firstName: 'Fred',lastName: 'Flintstone'}
});

5.2 使用Axios完成请求

依然是使用json-server模拟服务器的情况下,来模拟GET、POST、PUT、PATCH、DELETE,这5种常见的请求方式。

test.json的内容为3.4.2节中的内容,在test.json所在路径下,打开cmd输入以下命令启动json-server

json-server test.json --watch

1.GET请求

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 引入axios库 --><script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script></head><body><button>GET</button><script>const btn = document.querySelector("button");btn.onclick = async function () {await axios.get("http://localhost:3000/users") // 发送GET请求.then(res => {console.log(res); // 响应的全部内容console.log(res.data); // 响应的数据内容}).catch(err => {console.log(err);});};</script></body>
</html>

右键点击vscode-preview-server:Launch on browser,打开页面并点击GET按钮,运行结果如下:

在这里插入图片描述
如果要发送带参数的GET请求,可以修改axios.get()为以下内容:

// 获取id=1的数据
axios.get("http://localhost:3000/users", {params: {id: 1 }
});

2.POST请求

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 引入axios库 --><script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script></head><body><button>POST</button><script>const btn = document.querySelector("button");btn.onclick = async function () {await axios.post("http://localhost:3000/users", { name: "Ada", age: 18 }) // 发送POST请求.then(res => {console.log(res.data);}).catch(err => {console.log(err);});};</script></body>
</html>

如果要使用form编码的格式,可以修改axios.post()为以下内容:

axios.post("http://localhost:3000/users", "name=Michael&age=18")

3.PUT请求

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 引入axios库 --><script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script></head><body><button>PUT</button><script>const btn = document.querySelector("button");btn.onclick = async function () {await axios.put("http://localhost:3000/users/3", { age: 28 }) // 发送PUT请求.then(res => {console.log(res.data);}).catch(err => {console.log(err);});};</script></body>
</html>

4.PATCH请求

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 引入axios库 --><script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script></head><body><button>PATCH</button><script>const btn = document.querySelector("button");btn.onclick = async function () {await axios.patch("http://localhost:3000/users/2", { age: 28 }) // 发送PATCH请求.then(res => {console.log(res.data);}).catch(err => {console.log(err);});};</script></body>
</html>

5.DELETE请求

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 引入axios库 --><script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script></head><body><button>DELETE</button><script>const btn = document.querySelector("button");btn.onclick = async function () {await axios.delete("http://localhost:3000/users/3") // 发送DELETE请求.then(res => {console.log(res.data);}).catch(err => {console.log(err);});};</script></body>
</html>

http://www.ppmy.cn/news/48121.html

相关文章

面试题30天打卡-day10

1、String 和 StringBuffer、StringBuilder 的区别是什么&#xff1f; String、StringBuffer、StringBuilder主要的区别在于执行效率和线程安全上。 String&#xff1a;String字符串常量&#xff0c;意味着它是不可变的&#xff0c;导致每次对String都会生成新的String对象&a…

网络工程师经常搞混的路由策略和策略路由,两者到底有啥区别?

当涉及到网络路由时&#xff0c;两个术语经常被混淆&#xff1a;策略路由和路由策略。虽然这些术语听起来很相似&#xff0c;但它们实际上有着不同的含义和用途。在本文中&#xff0c;我们将详细介绍这两个术语的区别和应用。 一、路由策略 路由策略是指一组规则&#xff0c;用…

十大排序算法之插入排序、希尔排序、选择排序

个人主页&#xff1a;平行线也会相交 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 平行线也会相交 原创 收录于专栏【数据结构初阶&#xff08;C实现&#xff09;】 本篇主要讲解八大排序算法中的三种排序&#xff0c;分别是&#xff1a;插入排序、希尔排…

高并发的程序设计-系统设计层面

高并发的程序设计-系统设计层面 目录概述需求&#xff1a; 设计思路实现思路分析1.主要指标二、处理高并发的方案 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;skip hardness,make a better …

【C++类和对象】类和对象(上) {初识面向对象,类的引入,类的定义,类的访问限定符,封装,类的作用域,类的实例化,类对象模型,this指针}

一、面向过程和面向对象初步认识 C语言是面向过程的&#xff0c;关注的是过程&#xff0c;分析出求解问题的步骤&#xff0c;通过函数调用逐步解决问题。 C是基于面向对象的&#xff0c;关注的是对象&#xff0c;将一件事情拆分成不同的对象&#xff0c;靠对象之间的交互完成。…

如何将项目提交到别人的仓库

大纲&#xff1a; 1、在gitee中克隆(clone)别人仓库的代码。 首先&#xff0c;进入别人的仓库&#xff0c;点击 克隆/下载 2、在你存放项目的文件夹下克隆你刚刚复制的代码 &#xff08;右键点击Git Clone即可&#xff09; 点击OK 就开始克隆了 克隆成功之后&#xff0c;文件上…

springboot+vue准妈妈孕期交流平台(源码+文档)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的准妈妈孕期交流平台。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 &#x1f495;&#x1f495;作者&#xff1a;…

【Spring Boot】SpringBoot 优雅整合Swagger Api 自动生成文档

文章目录 前言一、添加 Swagger 依赖二、创建接口类三、添加 Swagger 配置类四、访问 Swagger 页面五、整合一个更友好的UI接口文档 Knife4j1、添加 Knife4j 依赖2、添加 Knife4j 配置类3、访问 Knife4j 页面 总结 前言 Swagger 是一套 RESTful API 文档生成工具&#xff0c;可…

ChatGPT原理详解+实操

言 ChatGPT已近火了快大半年了&#xff0c;从去年刚出来的时候小编就关注了一下&#xff0c;也具体的使用过&#xff0c;然后就惊为天人&#xff0c;再然后就没有然后了&#xff0c;因为小编那段时间沉迷于AIGC了。ChatGPT今年开年后更是火的一塌糊涂&#xff0c;无论是行业内…

一流棒球特色学校应该具备什么条件·棒球1号位

随着人们生活水平的提高和健康意识的增强&#xff0c;越来越多的人开始关注体育运动的健康和乐趣。而棒球作为一项全身性、协调性和技术性都极高的运动&#xff0c;受到了越来越多人的喜爱和追捧。为了满足人们对于棒球运动的需求&#xff0c;棒球特色学校应运而生。那么&#…

一文搞懂文件下载·读取漏洞

一文搞懂文件下载读取漏洞 1.概述2.利用思路3.常见文件WindowsLinux 4.不安全的文件下载绕过手法5.修复建议 1.概述 文件下载功能在很多web系统上都会出现&#xff0c;一般我们当点击下载链接&#xff0c;便会向后台发送一个下载请求&#xff0c;一般这个请求会包含一个需要下…

一名合格的亚马逊运营,从早到晚都在做什么?

最近东哥分享了很多关于亚马逊话题的文章&#xff0c;发现有很多小伙伴很好奇亚马逊运营的事&#xff0c;很多人都说很想知道一名合格的亚马逊运营每天都需要干什么&#xff0c;那今天东哥就拿我们自己团队的亚马逊运营来跟大家聊一聊。 亚马逊运营从早到晚都干了些什么活&…

微信小程序自定义组件:组件间通讯

前言 略 组件间通信 组件间的基本通信方式有以下几种&#xff1a; WXML 数据绑定&#xff1a;用于父组件向子组件的指定属性设置数据&#xff0c;仅能设置 JSON 兼容数据&#xff08;自基础库版本 2.0.9 开始&#xff0c;还可以在数据中包含函数&#xff09;。具体在 组件模…

Python如何使用和配置Anaconda入门

1、Anaconda介绍 Anaconda 是一款广泛使用的Python和R语言开发环境&#xff0c;集成了许多常用的科学计算和数据分析库。它包括conda、Python解释器以及大量有用的库和工具&#xff0c;使得您可以更轻松地搭建Python和R的开发环境。此外&#xff0c;Anaconda 还提供了一个简单…

网络编程及项目思路

计算机和计算机之间通过网络进行数据传输 常见的软件架构&#xff1a; C/S:客户端/服务器 画面可以做的非常精美&#xff0c;用户体验好需要开发客户端&#xff0c;也需要开发服务端用户需要下载和更新的时候太麻烦 B/S:浏览器/服务器 不需要开发客户端&#xff0c;只需要…

车企围攻整车OS,这张“新王牌”怎么打?

今年2月23日&#xff0c;梅赛德斯--奔驰发布了打造自有操作系统MB.OS的具体计划&#xff0c;该操作系统将在本年代中期随全新梅赛德斯-奔驰模块化架构&#xff08;MMA&#xff09;平台推出&#xff0c;预计2025年用户将能体验到它的强大功能。 据悉&#xff0c;基于覆盖芯片到…

Linux_红帽8学习笔记分享_5

Linux_红帽8学习笔记分享_5 文章目录 Linux_红帽8学习笔记分享_51. UMASK反掩码1.1如何查看反掩码umask1.2 UMASK反掩码的作用1.2.1对于目录来说1.2.2对于文件来说 1.3如何修改UMASK反掩码1.4普通用户反掩码的测试 2.whereis的使用3. SUID权限弥补(主要针对文件,所有者执行位变…

C++---状态压缩dp---炮兵阵地(每日一道算法2023.4.17)

注意事项&#xff1a; 本题为"状态压缩dp—蒙德里安的梦想"和"状态压缩dp—小国王"和"状态压缩dp—玉米田"的近似题&#xff0c;建议先阅读这三篇文章并理解。 题目&#xff1a; 司令部的将军们打算在 NM 的网格地图上部署他们的炮兵部队。 一个…

计算机组成原理(考研408)练习题#1

用于复习408或计算机组成原理期末考试。如有错误请在评论区指出。 So lets start studying with questions! それでは、問題の勉強を始めましょう&#xff01; 1. 设有一个 1MB 容量的存储器&#xff0c;字长为 32 位&#xff0c;问&#xff1a; &#xff08;1&#xff09;按…

【数据结构】第十三站:排序(上)

本文目录 一、排序概念二、插入排序1.插入排序的基本思想2.算法实现3.时间复杂度分析 三、希尔排序1. 希尔排序的思想2.希尔排序的代码实现3.希尔排序和插入排序的性能测试比较4.希尔排序的时间复杂度 四、直接选择排序1.基本思想2.直接选择排序的步骤3.直接选择排序的代码实现…