JS Promise 回调地狱 fetchApi aysnc await

回调地狱：三次请求 多次请求

const getTodos = (resource, callback) => {
  const request = new XMLHttpRequest();

  request.addEventListener('readystatechange', () => {
    if (request.readyState === 4 && request.status === 200) {
      const data = JSON.parse(request.responseText);
      callback(undefined, data);
    } else if (request.readyState === 4) {
      callback('无法获取数据', undefined);
    }
  });

  request.open('GET', resource);
  request.send();
};

getTodos('test/summer.json', (err, data) => {
  console.log(data);
  getTodos('test/lucy.json', (err, data) => {
    console.log(data);
    getTodos('test/henry.json', (err, data) => {
      console.log(data);
    });
  });
});

嵌套回调内部 不断进行 调用 上一批数据获取 才能请求下一批数据

不容易进行维护和管理

 promise

是构造函数，包含一个执行器executor，在promise内部，有三种状态pending、fulfilled和rejected，一旦内部状态发生变化，就不可更改

.then和.catch都会返回一个新的Promise

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”即从 pending 变为 resolved

修改HTTP请求

const getTodos = (resource, callback) => {
;

  return new Promise((resolve,reject)=>
    {
      const request = new XMLHttpRequest()
      request.addEventListener('readystatechange', () => {
        if (request.readyState === 4 && request.status === 200) {
          const data = JSON.parse(request.responseText);
          resolve(data);
        } else if (request.readyState === 4) {
          reject('无法请求数据');
        }
      });
    
      request.open('GET', resource);
      request.send();
    
    }
  )
}

调用函数

getTodos('test/summer.json')
.then((data) => {
  console.log(data);
  return getTodos('test/lucy.json');
})
.then(
  (data) => {
    console.log(data);
    return getTodos('test/henry.json');
  })
  .then(
  (data) => {
    console.log(data);
  })
  .catch(
  (err) => {
    console.log(err);
  }
);

//fetch  它是基于 Promise 的

//fetch() 方法必须接受一个参数——资源的路径。无论请求成功与否，它都返回一个 Promise 对象，resolve 对应请求的 Response。

//fetch  它是基于 Promise 的
//fetch() 方法必须接受一个参数——资源的路径。无论请求成功与否，它都返回一个 Promise 对象，resolve 对应请求的 Response。

fetch('test/summer.json').then(
  (response)=>{
    console.log('resolve',response);
    return response.json(); //返回Promise
  }
).then(
  data=>{
    console.log(data);
  }
).catch(
  (err)=>{
    console.log('rejected',err);
  }
);

asny await  

async函数返回一个 Promise对象，可以使用then方法添加回调函数。只要使用async，不管函数内部返回的是不是Promise对象，都会被包装成Promise对象。

1.同步执行异步代码，按顺序执行，并阻塞线程保证执行顺序。
2.会阻塞线程。
3.遇到执行回调中第一个失败，报错如果不加try...catch会直接中断线程
4.依次执行保证指定顺序调用异步函数。
5.简洁的使用语法糖。

//async 和 await

// fetch('test/summer.json').then(
//   (response)=>{
//     console.log('resolve',response);
//     return response.json(); //返回Promise
//   }
// ).then(
//   data=>{
//     console.log(data);
//   }
// ).catch(
//   (err)=>{
//     console.log('rejected',err);
//   }
// );

const getTodos= async ()=>{
    const response= await fetch('test/henry.json'); //返回promise  await 等待 fetch 执行完

    if(response.status !== 200){
      throw new Error('无法获取数据');
    }
    const  data= response.json();
    console.log(data);
    return data;
  

};

getTodos().then( data=>{  console.log(data) }) .catch(
  (err)=>console.log('reject',err.message)
);