js-promise异步编程

个人博客：xiaolan1.icu

## 一、单线程与多线程

单线程：一次只能完成一个任务。如果有多个任务，就得排队，完成前面的任务之后才能进行下一个任务。(实现简单，耗时太长)

多线程：为了提高资源使用效率，同一时间完成多个任务。

二、同步与异步

同步：任务按排列顺序执行。

异步：延迟处理，浏览器在下载js的同时，还会执行后续的页面处理。

三、通过代码体会异步操作

1. 宏任务与微任务

宏任务先执行，微任务后执行

let promise = new Promise(resolve =>{
    setTimeout(() =>{
        resolve(); //创建微任务
        console.log("setTimeout"); //宏任务③
    },0);
    console.log("promise"); //宏任务①
}).then(value => console.log("成功")); //微任务
console.log('hello world') //宏任务②
//打印结果顺序 promise  hello wolrd  setTimeout 成功

2. Promise与then的简单实现

then返回的也是一个promise对象

let p = new Promise((resolve, reject) => {
     resolve('hello')
 }).then(
     value => {
         return new Promise((resolve, reject) => {
             resolve(value + ' world')  //这里的value是上面的hello
         })
     },
     reason => {
         console.log('error' + reason);
     }
 ).then(value => {
     console.log(value);   //hello world
 })

3. 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('加载失败')
            }
        }
    })
}

//模拟使用
let url = `http://localhost:8081`;
ajax(`${url}/user`).then(
    value=>{
    console.log(value);
},
	reason=>{
        console.log('error'+reason);
    })

4. catch抛出错误的使用

let p = new Promise((resolve, reject) => {
     resolve('hello')
 }).then(
     value => {
         return new Promise((resolve, reject) => {
            reject(value + ' world')  //这里的value是上面的hello
         })
     },
 ).then(value => {
     console.log(value);   //hello world
 }).catch(error =>{
    console.log(error)  //catch捕获出现的reject后的then没有第二个参数并打印，打印hello world
})