Promise 异步编程
在原生js写过函数的回调函数 事件 异步编程
Promise 是一个容器 里面放的是未来或者异步的即将发生的东西
Promise 对象的三大状态不收外界影响 在内部的异步编程的结果会影响
Promise 对象的使用 也是一个构造函数 new
let promise = new Promise(function (resolve, reject) {
//resolve 成功 在异步操作成功的时候调用
//reject 失败 在异步操作失败的时候调用
let status = false;
let data = "abc";
if (status) {
resolve(data);
}
else {
let error = new Error("异步操作失败!");
reject(error);
}
});
promise对象的使用
then() 两个回调函数 第一个是resolve时候调用 第二个是reject时候调用
promise.then(function (result) {
//success
console.log(result);
}, function (error) {
//error
console.log(error);
});
then 方法存在原型对象上面 then方法返回的是一个promise对象 和之前的不一致 还可以继续点then
连续点then
let promiseinfo=new Promise(function (resolve,reject){
let data={
type:"json",
json:[
{name:"张三"},
{name:"李四"},
{name:"王五"}
]
};
resolve(data);
});
promiseinfo.then(function (res){
return res.json;
}).then(function(res){
console.log(res);
}).finally(function (){
console.log("不管什么状态都会执行");
});
promise方法
到底成功环视失败取决什么东西 主要是代码的执行
请求数据一般都有模拟的时间
1秒之后请求成功
成功还是失败取决返回的success error
let method = function () {
return new Promise(function (resolve, reject) {
let s = false;//模拟ajax 成功
setTimeout(function () {
if (s) {
resolve("成功")
}
else {
reject("失败");
}
}, 1000);
$.ajax({
success: function () {
resolve("成功")
},
error: function () {
reject("失败")
}
});
});
}
method().then(function (res) {
console.log(res);
}).catch(function (error) {
console.log(error);
});
sync 异步函数 让异步编程更简单
语法
构建async函数
内部等待执行多个promise对象执行
将多个promise对象进行包装
返回的是一个promise对象
await 等待
内置器
function getData(str) {
return str;
}
async function method() {
let p1 = await getData("毛豆");
let p2 = await getData("张三");
return {
promise1:p1,
promise2:p2
};
}
异步函数的执行方式和函数一致
method().then(function (res){
console.log(res);
}).catch(function (error){
console.log(error);
});
async 函数里面等待多个promise对象执行
let promethod = function (ms) {
return new Promise(function (resolve, reject) {
setTimeout(resolve, ms, "成功");
});
}
async function method() {
console.log("开始");
let p1 = await promethod(1000);
console.log("执行完一个");
let p2 = await promethod(1500);
console.log("执行完二个");
return {
pro1: p1,
pro2: p2
}
}
method().then(function (res) {
console.log(res);
}).catch(function (err) {
console.log(err);
});