同步

同步是指一个进程在执行某个请求的时候，如果该请求需要一段时间才能返回信息，那么这个进程会一直等待下去，直到收到返回信息才继续执行下去。

//同步任务
   const a = 2
   const b = 3
   console.log(a + b) //5 

异步

异步是指进程不需要一直等待下去，而是继续执行下面的操作，不管其他进程的状态，当有信息返回的时候会通知进程进行处理

  // 异步任务
    console.log(1);
    setTimeout(() => {
      console.log(2);
    })
    console.log(3);
  //打印的结果是1,3,2  setTimeout是一个异步的操作

异步任务必须等同步任务执行之后才能执行

Ajax的原理

    // 1、创建XMLHttpRequest对象
    var xmlhttp
    if (window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest()
    } else { // 兼容早期浏览器
      xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')
    }
    
     // 2、发送请求
    xmlhttp.open('GET', url, true)
    xmlhttp.send()
    
     // 3、服务端响应
    xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
        var obj = JSON.parse(xmlhttp.responseText)
        // console.log(obj)
        callback(obj)
      }
    }
   

callback hell（回调地狱）

 ajax('static/a.json', res => {
    console.log(res)
  ajax('static/b.json', res => {
    console.log(res)
  ajax('static/c.json', res => {
     console.log(res)
      })
    })
 })

Promise

// new出来一个Promise，有2个状态resolve(成功)，reject(失败)
     let arr = new Promise((resolve, reject) => {
        // resolve('成功')
        reject('失败')
     })
     arr
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      })

Promise的链式调用

new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(1)
      }, 1000)
    }).then(res => {
      console.log(res);
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(2)
        }, 1000)
      })
    }).then(res => {
      console.log(res);
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(3)
        }, 1000)
      })
    }).then(res => {
      console.log(res);
    })

Promise的静态方法

Promise.resolve

    p1.then(res => {
      console.log(res); //成功
    })
    let p1 = Promise.resolve('成功')
    p1.then(res => {
      console.log(res); //成功
    })

Promise.reject

    let p2 = Promise.reject('失败')
    p2.catch(err => {
      console.log(err);//失败
    })

Promise.all

   let p1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log(1)
        resolve('1成功')
      }, 1000)
    })
    let p2 = new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log(2)
        // resolve('2成功')
        reject('2失败')
      }, 2000)
    })
    let p3 = new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log(3)
        resolve('3成功')
      }, 3000)
    })
    //Promise.all有一个失败就会认为都是失败
    Promise.all([p1, p2, p3]).then(res => {
      console.log(res);
    }).catch(err => { 
        console.log(err);
    })

Promise.race

    let p1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log(1)
        resolve('1成功')
      }, 2000)
    })
    let p2 = new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log(2)
        // resolve('2成功')
        reject('失败')
      }, 1000)
    })
    let p3 = new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log(3)
        resolve('3成功')
      }, 3000)
    })
    //Promise.race有一个失败或者成功就会认为都是失败或者成功
    Promise.race([p1, p2, p3]).then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    })