学做吃的网站电商商城app制作开发
插入一下前端助手测试，顺手可以用来做安全
promise
promise 是一个es6新增的语法
汉语：承诺的意思 作用:是专门用来解决回调地狱!!!!
什么是回调函数？
<script>// 回调函数 callback回调// 就是把函数A当作参数传递到函数B中// 在函数B中以形参的方式去调用function fn(a){console.log(a()); }// function(){} 充当的就是一个回调函数fn(function(){return "结果"});setTimeout(()=>{})Array.forEach(()=>{})Array.filter(()=>{})</script>回调地狱
<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的基本语法
// 基本语法:// 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("成功")// reject("失败")}).then(res=>{console.log(res);}).catch(err=>{console.log(err);}).finally(()=>{console.log("成功失败都执行");})<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><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>封装一个等待函数
<body><script>// 成功 失败 状态 是在promise对象才有的function wait() {let p1 = new Promise((resolve, reject) => {// 写你的异步代码// XXXXsetTimeout(() => { resolve("成功") }, 2000)})return p1}wait().then(res => {console.log(res);})</script>
</body>promise解决回调地狱
// 封装的网络请求函数 ajax-promise.js// 哪些是可变的 请求方式 请求地址 请求参数 请求头// 可变的 调用函数的时候传参！！！ 传谁我就用谁！！function ajax(options){return new Promise((resolve,reject)=>{let method = options.method || "get";//如果你传了请求方式就用你传的 没传默认是getlet 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=18url = 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;}<!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>