Promise

使用Promise封装Ajax一部请求

function ajax(url){
return new Promise((resolve,reject)=>{
  let xhr = new XMLHttpRequest();
xhr.open('GET',url);
xhr.send();
xhr.onload=function(){
  if(this.status==200){
    resolve(JSON.parse(this.response))
  }else{
    reject('加载失败');
  }
};
xhr.oneroor = function(){
  reject(this)
}

})
}

let url = "https://localhost:8888/php";
ajax(`${url}/user.php?name=后盾人`).then(
  value=>{
    console.log(value);
  },
  reason=>{
    console.log(reason+'abd');
  }
);

promise多种错误检测与catch使用

new  Promise((resolve,reject)=>{
// reject('rejected')
resolve('成功');
}).then(value=>{
  return new Promise((resolve,reject)=>{
    reject('错误');

  });
})
.then(value=>{
  console.log(value);
})
.catch(error=>{
  console.log(error);
})
推荐把catch放在代码的后面可以对代码错误进行统一处理，如果在catch之前定义有处理错误的代码，则走错误代码，否则走catch

Promise异步加载图片

function loadImage(src){
  return new Promise((resolve, reject)=>{
    const image=new Image();
    image.src = src;
    image.onload = ()=>{ resolve(image)};
    image.onerror=reject;  //这个地方的reject为什么没有加开罗好
    document.body.appendChild(image);
  });
}

loadImage('tile.png').then(image=>{
image.style.border="solid 7px red";
});

封装settimeout定时器

function timeout(delay=2000) {
  // return new Promise((resolve=>{
  //  setTimeout(resolve, delay)
  // }))
  return new Promise((resolve,reject)=>{
    setTimeout(resolve, delay);
  })
}

timeout(2000)
.then(()=>{console.log("houdunren,com");
return timeout(2000);
})
.then(value=>{
  console.log("hdcms.com");
})

构建扁平化的setinterval

Script脚本的Promise加载引擎

function loadScript(src){
  return new Promise((resolve,reject)=>{
    const script = document.createElement('script');
    script.src =src;
    script.onload= ()=>{resolve(script)};
    script.onerror=reject;
    document.body.appendChild(script);

  });
}

loadScript("js/test.js").then(script=>{
  return loadScript("js/main.js");
}).then(script=>{
  houdunren();
})

Promise.resolve缓存后台数据

async和await语法糖

async function hd(){
let name =await new Promise(resolve=>{
  setTimeout(() => {
    resolve('第二个');

  }, 2000);
});
let site = await new Promise(resolve=>{
  setTimeout(() => {
    resolve(name+"houdunren.com")//能够接到上面的name
  }, 1000);
})
console.log(site);
}

hd()

await和async进行异步请求

获取QQ空间访问量

async function getUser(name){
let url ='https://api.muxiaoguo.cn/api/qzonetors';
let user = await axios.get(`${url}?qq=${name}`)
console.log(user.data.data);
}
getUser('2508026070')

async延时函数

async function sleep(delay=2000){
  return new Promise(resolve=>{
    setTimeout(()=> {
      resolve();   //记住状态要写，要不然后面的代码不执行
  },delay);
})
}
async function show(){
  for (const user of ['古人',"后人"]) {
  await sleep();
  console.log(user);
}
}
show();

await制作加载进度条

html部分
<div id="loading">0%</div>

css部分
div{
  background-color: rgb(185, 125, 241);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color:aliceblue
}

JS部分
//使用axios调用接口的时候有个问题，它只能调用一次，后面的调不出来
async function getUser(name){
let url ='https://api.muxiaoguo.cn/api/qzonetors';
return await axios.get(`${url}?qq=${name}`);
}

async function loaderUser(users){
  for (let i=0; i<users.length; i++){
    let user = await getUser(users[i]);]
    let progress = ((i+1)/users.length)*100;
    loading.style.width = progress +"%";
    loading.innerHTML = progress+"%"
  }
}
loaderUser(['1626676263', '1908948984'])

await与class的结合

class User{
constructor(name){
  this.name =name;
}
  then(resolve,reject){
    let url ='https://api.muxiaoguo.cn/api/qzonetors';
    let result=axios.get(`${url}?qq=${this.name}`);
    resolve(result);//注意这里要将状态的值返回回去，要不然下面接不到就不会执行
  }
}
async function get(){
  let user = await new User("1626676263");
  console.log(user.data.data);
}
//调用函数
get()

异步封装在类内部

class User{
constructor(name){
  this.name =name;
}
async get (name){
  let url ='https://api.muxiaoguo.cn/api/qzonetors';
   let result= await axios.get(`${url}?qq=${name}`);
   result.data.data.todaycount+= "多少次";
   return result
}
}
new User().get('1626676263').then(result=>{
console.log(result);
})