插入一下前端助手测试，顺手可以用来做安全
promise
promise 是一个es6新增的语法
汉语：承诺的意思 作用:是专门用来解决回调地狱!!!!
什么是回调函数？
javascript
<script>
// 回调函数 callback回调
// 就是把函数A当作参数传递到函数B中
// 在函数B中以形参的方式去调用
function fn(a){
console.log(a());
}
// function(){} 充当的就是一个回调函数
fn(function(){return "结果"});
setTimeout(()=>{
})
Array.forEach(()=>{})
Array.filter(()=>{})
</script>回调地狱
javascript
<body>
<script src="./ajax.js"></script>
<script>
// 回调地狱
// 为什么要有回调函数
// - 当我们有一个异步行为的时候,我们需要在一个异步行为执行完毕之后做一些事情
// - 我如何知道这个异步行为啥时候完毕
// - 这时候我们就可以用回调函数的形式来进行
// eg:比如 现在我要调用注册接口
// 想要的效果是注册成功之后 在去马上登录
// 咋知道啥时候注册成功呢? 调用注册接口时会有回调函数
// 一旦走了回调函数 代表注册成功
ajax({
url: "/users/register",
method: "post",
data: {
username: "hahahhahahah",
password: "123456",
rpassword: "123456",
nickname: "踏月11111"
},
success(res) {
console.log("第一次请求");
ajax({
url: "/users/login",
method: "post",
data: {
username: "hahahhahahah",
password: "123456"
},
success(res) {
console.log("第二次请求");
ajax({
url:"XXX",
success(){
console.log("第三次请求");
}
})
}
})
}
})
// 回调函数 里边 套回调函数 套回调函数....
// 缺点:代码可读性不好
</script>
</body>promise的基本语法
javascript
// 基本语法:
// Promise中 写异步代码
//
let p1 = new Promise(function(resolve,reject){
//resolve("成功")
reject("失败")
})
// 一旦调用了.then 就会触发resolve 方法
// 一旦调用了 .catch 就会触发 reject 方法
p1.then(res=>{
console.log(res);
})
p1.catch(err=>{
console.log(err);
})
//promise 有三种状态
// pending -- 创建成功 等待中
// fulfilled -- 调用了resolve 成功时执行
// rejected -- 调用了 reject 失败时执行
javascript
new Promise(function(resolve,reject){
resolve("成功")
// reject("失败")
}).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
}).finally(()=>{
console.log("成功失败都执行");
})
html
<body>
<script>
// 基本语法:
// Promise中 写异步代码
// //
// let p1 = new Promise(function(resolve,reject){
// //resolve("成功")
// reject("失败")
// })
// // 一旦调用了.then 就会触发resolve 方法
// // 一旦调用了 .catch 就会触发 reject 方法
// p1.then(res=>{
// console.log(res);
// })
// p1.catch(err=>{
// console.log(err);
// })
//promise 有三种状态
// pending -- 创建成功 等待中
// fulfilled -- 调用了resolve 成功时执行
// rejected -- 调用了 reject 失败时执行
new Promise(function(resolve,reject){
resolve(function(){
return "123"
});
// reject("失败")
}).then(res=>{
console.log(res());
}).catch(err=>{
console.log(err);
}).finally(()=>{
console.log("成功失败都执行");
})
</script>
</body>
html
<body>
<script>
// 希望过5秒之后 在调用一个定时器 在打印东西
// 异步代码转成同步代码 同步代码需要等待
new Promise(function(resolve,reject){
setTimeout(()=>{
console.log("5秒的定时器");
resolve("resolve触发了")
},5000)
console.log("嘿嘿嘿");
}).then(res=>{
console.log(res);
setTimeout(()=>{
console.log("2秒定时器");
},2000)
})
// new Promise(function(resolve,reject){
// setTimeout(()=>{
// console.log("5秒的定时器");
// // resolve("resolve触发了")
// setTimeout(()=>{
// console.log("我是2秒的定时器");
// },2000)
// },5000)
// console.log("嘿嘿嘿");
// })
</script>封装一个等待函数
html
<body>
<script>
// 成功 失败 状态 是在promise对象才有的
function wait() {
let p1 = new Promise((resolve, reject) => {
// 写你的异步代码
// XXXX
setTimeout(() => { resolve("成功") }, 2000)
})
return p1
}
wait().then(res => {
console.log(res);
})
</script>
</body>promise解决回调地狱
javascript
// 封装的网络请求函数 ajax-promise.js
// 哪些是可变的 请求方式 请求地址 请求参数 请求头
// 可变的 调用函数的时候传参！！！ 传谁我就用谁！！
function ajax(options){
return new Promise((resolve,reject)=>{
let method = options.method || "get";//如果你传了请求方式就用你传的 没传默认是get
let url = options.url;
let header = options.header || {"Content-Type":"application/x-www-form-urlencoded"}
let type = options.dataType || "json"
// ajax希望传的是 ?name=jack&age=18 所以传来的参数进一步处理
let data = formatData(options.data || {});
// data参数 get和post请求方式不一样 分情况讨论
// get 方式在地址后边拼接 post方式是通过send（data） 发送的
if(method.toUpperCase()=="GET"&&data){
// foruth?name=jack&age=18
url = url+"?"+data
}
// 1-创建xhr对象
let xhr = new XMLHttpRequest();
// 2-设置xhr对象
xhr.open(method,`http://localhost:8888${url}`)
for(let key in header){
xhr.setRequestHeader(key,header[key]);
}
// 3- 发起请求
// 分成两种情况 post请求的话 参数是通过send取发送的
if(method.toUpperCase()=="POST" && data){
xhr.send(data);
}else{
xhr.send();
}
// 4- 处理响应结果
xhr.onload = function(){
// 有可能是纯字符串 有可能是json字符串 (最常用的json串)
let result;
if(type=='json'){
result = JSON.parse(xhr.responseText)
}else{
result = xhr.responseText
}
// options.success(result)
resolve(result)
}
})
}
// 格式化data的函数
function formatData(obj){
let data = ""; // 保存保存处理好之后的数据
for(let key in obj){
data += `&${key}=${obj[key]}`
}
data = data.slice(1);//从下标为1开始截取到最后
return data;
}
html
<!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>
<script src="./ajax-promise.js"></script>
</head>
<body>
<!-- ajax函数 封装成一个promise -->
<script>
// promise.then().then().then() 正确的学法
// promise.then(XXXX.then().XXXX.then)
ajax({
url: "/users/register",
method: "post",
data: {
username: "hahahhahahah123",
password: "123456",
rpassword: "123456",
nickname: "踏月11111"
}
}).then(res => {
console.log("第二次请求");
ajax({
url: "/users/login",
method: "post",
data: {
username: "hahahhahahah",
password: "123456"
},
})
}).then(res => {
console.log("第三次请求");
})
</script>
</body>
</html>