promise:
定义:是解决异步编程问题的一种方案
从语法上来讲,promise是一个对象,通过这个对象,我们可以获取异步操作的信息
例如:
var promise = new Promise((resolve,reject) => {
var random = Math.random();
console.log(random); 打印: 0.8098503940477322
setTimeout(() => {
if(random > 0.5) {
resolve({
status : 1,
msg : "响应成功"
});
}else{
reject({
status : 0,
msg : "响应失败"
})
}
},1000)
})
打印结果:Objectmsg: "响应成功" status: 1__proto__: Object 因为 随机数是0.8 > 0.5
then方法
error:
promise.then(data=>{
console.log(data);
},error=>{
console.log(error);
})
catch
promise.then(data => {
console.log(data);
}).catch(error => {
console.log(error);
})
console.log(000);
async和await 是ES7提出来的
相同点:两个的作用都是和promise一样,但是它的好处在于让异步和同步的一样,而且一般情况下,async写在函数的最前面,被修饰的函数的返回值,一定是promise对象
作用:解决异步问题
注意点:同步方法是:我们拿到结果 是通过返回值
异步方法是:拿到结果,是靠回调函数
基本语法:
1.就是在普通函数前加一个async,调用跟普通函数一样
2.async出现使用 一般都要加个await配合使用
3.await后面接的就是一个promise对象 await一定是在异步函数中使用的
例:
首先先写两个函数,用下面两种方法来改
function test1(){
return new Promise((resolve,reject) => {
console.log(111);
resolve(1);
})
}
function test2(){
return new Promise((resolve,reject) => {
test1().then(data => {
console.log(data);
resolve();
})
})
}
test2();
例:
**async await **:
async function test1(){
console.log(111);
return 1;
}
async function test2(){
console.log(await test());
}
test2();
回调函数的改写 :
function a(timer,ste){
var promise = new Promise((resolve,reject) => {
setTimeout(() => {
resolve(str);
},time)
})
return promise;
}
async function test3(){
var a1 = await a(2000,"我是第一层回调");
console.log(a1);
var a2 = await a(3000,"我是第二层回调");
console.log(a2);
var a3 = await a(4000,"我是第三层回调");
console.log(a3);
var a4 = await a(5000,"我是第四层回调");
console.log(a4 );
}
test3();
promise 回调地狱
定义:函数作为参数层层嵌套
方法1:
例1:
setTimeout(() => {
console.log("我是第一层回调");
setTimeout(() => {
console.log("我是第二层回调");
setTimeout(() => {
console.log("我是第三层回调");
setTimeout(() => {
console.log("我是第四层回调");
}, 2000)
}, 2000)
}, 1000)
}, 2000)
*打印结果:会根据定时器设置的时间来一个一个的打印函数体*
方法2:是利用函数来写
例2:
function a(time, str) {
var promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(str);
}, time)
})
return promise;
}
a(1000, "我是第一层回调").then(data => {
console.log(data);
return print(2000, "我是第二层回调");
}).then(data2 => {
console.log(data2);
return print(2000, "我是第三层回调");
}).then(data3 => {
console.log(data3);
return print(2000, "我是第四层回调");
}).then(data4 => {
console.log(data4);
})
*打印结果与上面方法相同,只是写法不同*
promise封装ajax
示例:
注意:下面的代码要在服务端运行,否则会报错
function ajax(url, type) {
var promise = new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
if (type == "get") {
xhr.open(type, url);
} else {
xhr.open(type, url);
请求头
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
}
发送请求
xhr.send();
判断状态
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = xhr.responseText;
console.log(xhr.responseText);
}
}
})
return promise;
}
ajax("自己的php路径", "get").then(function (data) {
console.log(data);
})
promise方法
1.new一个promise方法
var 变量名 = new Promise((resolve,reject)=> {代码块})
例如:先写多个promise方法,然后同时发送出去,
var P1 = new Promise((resolve,reject) => {
setTimeout(function(){
resolve("我是第一个请求");
} ,1000)
})
var P2 = new Promise((resolve,reject) => {
setTimeout(function(){
resolve("我是第一个请求");
} ,1000)
})
all方法:
Promise.all([P1,P2]).then(data =>{
console.log(data);
})
raceFF1方法:
Promise.race([r1,r2,r3,r4]).then(data => {
console.log(data);
})
all方法:请求同时发送出去的 但是要等到最后一个请求返回以后,统一处理数据
race方法:请求同时发送出去,谁先回来,就是用谁的数据