目录
promise
例一
普通版本：
{
//异步线程
const p = new Promise(function(resolove,reject){
// resolove("成功");//成功返回调用
reject("失败"); //失败返回调用
});
//调用
p.then(
function success(value){
console.log(value);
},
function error(error){
console.log(error);
}
);
}箭头函数版本：
//箭头函数版本
const p = new Promise((resolove,reject)=>{
// resolove("success");
reject("error");
}).then(
value=>{
console.log(value);
},
error=>{
console.log(error);
}
);例二
一个线程执行操作，执行完毕调用另一个线程显示结果
实例：老王买饼，吃饼
{
//根据输入的mood的值来决定返回是什么
const getJianBing = mood => new Promise((resolve,reject)=>{
if (mood) {
const JianBing = {
append:"鸡肉味煎饼",
money:10
}
resolve(JianBing);
}else{
const reason = new Error("今天星期不好，所以不带");
reject(reason);
}
});
//调用
const askWang = getJianBing(false).then(
value=>{
console.log("买的是"+value.append+"需要"+value.money+"钱");
},
error=>{
console.log(error);
}
);
}例三
一个线程加载图片，一个线程显示图片
{
//加载图片 Promise:许诺，承诺
const loading = url => new Promise((resolve,reject)=>{
const img = new Image();
img.src = url;
//这就是加载方法
img.onload = () =>resolve(img);
//加载失败方法
img.onerror = () =>reject(url);
});
//显示图片线程
//querySelector() 方法仅仅返回匹配指定选择器的第一个元素
//如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代
const img2 = document.querySelector("img");
loading("http://img.ivsky.com/img/tupian/pre/201804/02/shenmi_dongxue-004.jpg").then(
value=>{
img2.src = value.src;
}
)
}例四
修改裸板ajax为Promise方法
const ajax = (url,succ,fail) => {
const xhr = new XMLHttpRequest;
xhr.open("GET",url);
xhr.onreadystatechange = function(){
if(this.readyState === 4){
if(this.status === 200){
succ(this.response);
}else{
fail(this.statusText);
}
}
}
xhr.send();
}
//调用
ajax("http://localhost:8080/AAA/servlet/AAA",function(data){console.log(data)},function(error){console.log(error)});改写调用方法为promise
//改造调用方法
new Promise((resolve,reject) => {
ajax("http://localhost:8080/AAA/servlet/AAA",resolve,reject);
}).then(
value => console.log(value);
);改写ajax
//改写之后的ajax
const ajax = url => new Promise((resolve,reject) => {
const xhr = new XMLHttpRequest;
xhr.open("GET",url);
xhr.onreadystatechange = function(){
if(this.readyState === 4){
if(this.status === 200){
resolve(this.response);
}else{
reject(new Error(this.statusText));
}
}
}
xhr.send();
})
//调用
ajax("http://localhost:8080/AAA/servlet/AAA").then(
value => {
console.log(value);
},
error => {
console.log(error);
}
);例五--（多线程加载图片，模拟分布式项目）
//开启多个线程，同时加多个服务器的图片，当有一个加载完毕，立即通知显示线程，显示图片
const loadImage = url => new Promise((resolve,reject) => {
const img = new Image();
img.src = url;
img.onload = () => resolve(img);
img.onerror = () => reject(url);
});
const PromiseImage = [loadImage("http://img.ivsky.com/img/tupian/pre/201804/02/shenmi_dongxue-004.jpg"),
loadImage("http://img.ivsky.com/img/tupian/pre/201804/02/shenmi_dongxue-005.jpg"),
loadImage("http://img.ivsky.com/img/tupian/pre/201804/02/shenmi_dongxue-008.jpg")
];
//多个加载，显示多个
Promise.all(PromiseImage).then(
values => {
values.forEach(
v => document.body.appendChild(v);
)
},
error => {
console.log(error);
}
)
//多个加载，显示最快的那个
Promise.race(PromiseImage).then(
value =>{
document.body.appendChild(value);
},
error => {
console.log(error);
}
)Genertor
超级线程（必须用*修饰，和关键字yield）
这种线程，每次执行，都只执行一部分
每次执行到yield的返回值结束，yield前面的部分和下面的代码一起执行这里容易出题
//Genertor
let tell = function*(){
yield 'a';
yield 'b';
yield 'c';
yield 'd';
return 12;
}
let k = tell();
console.log(k.next());
console.log(k.next());
console.log(k.next());
console.log(k.next());
console.log(k.next());
// {value: "a", done: false}
// {value: "b", done: false}
// {value: "c", done: false}
// {value: "d", done: false}
// {value: 12, done: true}例一
模拟抽奖：每次点击就抽一次，每个人有5次的机会
//通报剩余抽奖次数的方法
let draw = function(count){
//具体事务
console.log(`剩余${count}次`);
}
//抽奖真正的方法
//每次都执行一次，到了五次以后就等于0
let resider = function *(count){
while(count>0){
count--;
yield draw(count);
}
}
//开始抽奖
//调用方法
let start = resider(5);
//创建一个按钮
let btn = document.createElement("Button");
//设置他的ID为
btn.id = "start";
//按钮的内容
btn.textContent = "抽奖";
//在body里面添加该按钮
document.body.appendChild(btn);
//获得该按钮并绑定事件
document.getElementById("start").addEventListener("click",function(){
start.next();
},false);