目录
一、请求方式
几种常用的请求方式
name | work |
---|---|
get | 偏向获取数据 |
post | 偏向提交数据 |
put | 偏向更新数据(全部更新,会把之前的数据覆盖) |
delete | 偏向删除信息 |
patch | 偏向部分更新 |
常用的请求方式
name | work |
---|---|
header | 偏向获取服务器的头信息 |
options | 偏向获取服务器的设备信息 |
connect | 偏向保留请求方式 |
注释
为什么解释作用的时候会有偏向一说?
——其实请求方式更多是由后端决定的,比如get几乎可以做任何事,post在后端的配合下也能获取数据等等。
既然如此那为什么要分这么多不同的请求方式?
——不同的请求方式就像是前端和后端交流时的不同语气,我们可以根据不同的场景选择适当的语气,它们就像语气助词,能够更清晰的告诉后端你的选择、意图,但最终做出决定的还是后端。
很多公司写的时候都多用get、post,所以不是说非得按照某种方式去使用。
二、后端模拟接口介绍
学习请求方式,自然要用的接口,但为此去写接口是不现实的,也做不到,所以来学习搭建后端模拟接口。
首先
安装nodejs及进行环境配置,详细教程如下:nodejs安装及环境配置,一切就绪后如下:
第二步
配置json-server——npm install json-server -g
其作用是基于一个json文件就可以创建很多的后端模拟接口,安装方式如下:
第三步
使用并创建模拟接口,使用方式也很简单——在该文件下打开终端,输入json-server .\文件名.json,如下:
此时,后端模拟接口已经创建好了,可以打开看看,如下:
值得一提的是,json文件中的第一节的一个key值就相当于一个接口,有多少key值,就创建了几个接口,下面是我随便写的一个json文件:
三、常用请求方式测试
1、get
获取json文件中的所有数据并输出。
如果想获取某个数据,可以修改url,比如获得name=hello的数据,可以使用url:
xhr.open("GET","http://localhost:3000/users?name=hello")这里的?注意不要忘写。而这也正是get请求方式不安全的一个原因。
//GET 获取数据
myget.onclick = function (){
var xhr = new XMLHttpRequest()
xhr.open("GET","http://localhost:3000/users")
xhr.onload = function (){
//先判断 status为200-299,防止路径错误或后端接口有问题
//利用正则表达式进行条件判断
if (/^2\d{2}$/.test(xhr.status)){
console.log(JSON.parse(xhr.responseText))
}
}
//发送请求
xhr.send()
}
2、post
提交新数据数据并将其输出。
//下面是post支持的传输数据的结构 //post name=kerwin&age=100 字符串 //post {"name": "kerwin"} JSON数据 //提前说明自己要传输的数据格式 //字符串格式 // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")//name=kerwin&age=100 // xhr.send(`name=yuhua&password=23456`) //josn格式 xhr.setRequestHeader("Content-Type","application/json")下面以json格式为例:
//POST 提交数据
mypost.onclick = function (){
var xhr = new XMLHttpRequest()
xhr.open("POST","http://localhost:3000/users")
xhr.onload = function (){
if (/^2\d{2}$/.test(xhr.status)){
console.log(JSON.parse(xhr.responseText))
}
}
//josn格式
xhr.setRequestHeader("Content-Type","application/json")
xhr.send(JSON.stringify({ //将一个对象转为JSON格式传过去
id: "4",
name: "yuhua",
password: "123456"
}
))
}
看一下json文件中有没有接收到提交的数据:
3、put
更新id为1数据(如果不指出更新哪一条,会覆盖更新全部)并输出。
//PUT 更新所有数据
myput.onclick = function (){
var xhr = new XMLHttpRequest()
xhr.open("PUT","http://localhost:3000/users/1") //告诉后端你想修改id为1的数据
xhr.onload = function (){
if (/^2\d{2}$/.test(xhr.status)){
console.log(JSON.parse(xhr.responseText))
}
}
xhr.setRequestHeader("Content-Type","application/json")
xhr.send(JSON.stringify({
name: "buhello"
})) //此时如果只传name,数据更新后会将原本的内容全部覆盖,对象中只有name,password就没了
}
看一下json文件中数据是否被修改:
同时发现,操作之后password的确被覆盖掉了。
4、patch
更新部分内容(id为2的数据)并输出。
//PATCH 更新部分数据
mypatch.onclick = function () {
var xhr = new XMLHttpRequest()
xhr.open("PATCH", "http://localhost:3000/users/2") //告诉后端你想修改id为2的数据
xhr.onload = function () {
if (/^2\d{2}$/.test(xhr.status)) {
console.log(JSON.parse(xhr.responseText))
}
}
xhr.setRequestHeader("Content-Type", "application/json")
xhr.send(JSON.stringify({
name: "王德法"
//password: "7777"
})) //如果只更新name,原先的密码也会保留
}
看一下结果:
id为2的数据中name如愿被修改,而password也得到了保留。
5、delete
删除数id为4的数据并输出。
//DELETE 删除数据
mydelete.onclick = function () {
var xhr = new XMLHttpRequest()
xhr.open("DELETE", "http://localhost:3000/users/4") //告诉后端你想删除id为4的数据
xhr.onload = function () {
if (/^2\d{2}$/.test(xhr.status)) {
console.log(JSON.parse(xhr.responseText))
}
}
xhr.setRequestHeader("Content-Type", "application/json")
xhr.send()
}
看一下结果:
id为4的数据成功被删除。
注意nodejs后台要打开,否则服务器就自动关闭了。