1. 前言
简单的总结下前端的请求方式
2.服务端
服务端就选用node
任TA前端几路来,我后端只一路去
五种请求方式的前端,后端都是一套
// express 极简的web开发框架
const express = require('express')
var app = express()
// 静态资源目录,前端代码放这里
app.use(express.static(__dirname+"/public"))
// 中间件 处理post请求参数
app.use(express.json())
app.use(express.urlencoded({extended:true}))
//get请求的登录接口
app.get("/login",(req,res) => {
res.json({
code:1000,
msg:"get-成功",
name: req.query.name,
psw: req.query.password
})
})
// post请求的注册
app.post("/register",(req,res) => {
res.json({
code:1000,
msg:"post-成功",
name: req.body.name,
psw: req.body.password
})
})
// jsonp
app.get("/jsonp",(req,res) => {
res.jsonp({code:200,msg:"jsonp成功"})
})
app.listen(7788,()=>{
console.log("7788服务启动");
})
3.表单请求-get
4. 表单请求-post
5. 原生ajax-get
简易写法
var xhr = new XMLHttpRequest();
xhr.open("GET", `/login?name=${userName.value}&password=${password.value}`)
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log("ajax", xhr.responseText);
}
}
6.原生ajax-post
var xhr = new XMLHttpRequest();
xhr.open("POST", "/register")
//设置请求头 等配置信息
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
xhr.send(`name=${userName.value}&password=${password.value}`)
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText)
}
}
7. jQ-get
$.ajax({
type: "get",
url: "/login",
data: { name: userName.value, password: password.value },
success: function (response) {
console.log("jq-get:", response)
}
});
8.jQ-post
$.ajax({
type: "post",
url: "/register",
data: { name: userName.value, password: password.value },
success: function (response) {
console.log("jq-get:", response)
}
});
9. axios-get
注意的就是
axios的get请求参数{params:{参数}}
外面多了一层
axios.get("/login",{params: {
name: userName.value,
password: password.value
}})
.then(res => {
console.log("axios-get",res.data)
})
.catch(err => {
console.error("axios-get-err:",err);
})
10. axios-post
axios.post("/register", {
name:userName.value,
password:password.value
})
.then(res => {
console.log("axios-post",res.data)
})
.catch(err => {
console.error("axios-post-err",err);
})
第三个参数是配置信息,不需要配置就不填
{
headers: { "Content-Type": "application/x-www-form-urlencoded" }
}
11. fetch -get
fetch(`/login?name=${userName.value}&password=${password.value}`).then((res) =>{
res.json().then(data=>{
console.log("响应数据:",data)
})
})
12 fetch-post
fetch("/register",{
method: "POST",
body: JSON.stringify({
name:userName.value,
password:password.value
}),
headers: {
'Content-Type': 'application/json;charset=utf-8'
}
}).then((res) =>{
res.json().then(data=>{
console.log("响应数据:",data)
})
})
13.jsonp
jsonp 只是解决前端跨域的一种非标准的方式,
所以axios和fetch原生不支持jsonp,
通常还是后端解决跨域
13.1 原生ajax实现
回调函数写到 脚本标签的上边
实际工作中 都是动态创建script标签 ,拼接url参数
一般动态创建
script标签
let showMsg = (res) => {
console.log("jsonp 结果:", res)
}
let jsonpFn = () => {
let script = document.createElement("script")
script.src = "http://127.0.0.1:7788/jsonp?callback=showMsg"
document.body.appendChild(script)
//发完请求 就删掉 避免重复创建
document.body.removeChild(script)
}
13.2 jQ ajax实现
$.ajax({
type: "get",
url: "http://127.0.0.1:7788/jsonp",
data: {},
dataType: "jsonp",
success: function (response) {
console.log("response:",response);
}
});
重点就是
dataType设置为jsonp
14.fetch-xhr
| 工具 | 本质 | 优劣 |
|---|---|---|
| 原生XHR | let xhr = new XMLHttpRequest() | 浏览器支持的原生技术; 基于回调方式处理响应 |
| jQ ajax | XHR的进一步封装而已 | 比原生简单; 基于回调方式处理响应 |
| Axios | XHR的进一步封装而已 | 比原生简单; 基于Promise处理响应;可以排队,并发,撤销 |
| NG httpClient | XHR的进一步封装而已 | 比原生简单; 基于观察者模式方式处理响应;可以排队,并发,撤销 |
| Fetch | 不再是XHR,是W3C提出的新技术,希望是替代 XHR |
比XHR从根本上更加先进;天然基于Promise;兼容性还有点问题 |
参考资料
promise封装
fectch