Promise

# 简单使用

// promise 异步解决方案
// new Promise 的时候，传递的参数会自动执行
const promise = new Promise(function (resolve, reject) {
  console.log("异步操作执行中");
  let a = 10;
  setTimeout(() => {
    // 异步完事执行的操作
    a++;
    if (a > 10) {
      console.log("异步操作执行成功 ");
      resolve("中彩票了"); //成功
    } else {
      console.log("异步操作执行失败");
      reject("出错了"); //失败
    }
  }, 1000);
});

// then 传递的函数其实传递给了 promise 中的 resolve
// catch 传递的函数传递给了 reject
promise
  .then((res) => {
    console.log("异步执行完之后执行的其他操作");
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });

// 封装上边的 promise
let promiseFun = () => {
  return new Promise(function (resolve, reject) {
    console.log("异步操作执行中");
    let a = 10;
    setTimeout(() => {
      // 异步完事执行的操作
      a++;
      if (a > 10) {
        console.log("异步操作执行成功 ");
        resolve("中彩票了"); //成功
      } else {
        console.log("异步操作执行失败");
        reject("出错了"); //失败
      }
    }, 1000);
  });
};

promiseFun()
  .then((res) => {
    console.log("异步执行完之后执行的其他操作");
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });

# 使用 promise 封装原生 ajax 的 get 请求

// getPosts 就是一个原生的 get 请求方法
let getPosts = (url) =>
  new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    xhr.open("get", url);
    xhr.send();
    // onreadystatechange 是属于监听请求的整个过程
    // onload 是监听请求是否成功
    xhr.onload = () => {
      if (xhr.readyState === 4 && xhr.status === 200) {
        resolve(JSON.parse(xhr.responseText));
      } else {
        reject("出错");
      }
    };
  });
getPosts("http://localhost:3008/posts")
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });

# 依次请求

先请求第一个文章数据，请求成功之后再请求第二个文章数据，然后再请求第三个

let getPosts = (url) =>
  new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    xhr.open("get", url);
    xhr.send();
    // pending 异步进行中
    // onreadystatechange 是属于监听请求的整个过程
    // onload 是监听请求是否成功
    xhr.onload = () => {
      if (xhr.readyState === 4 && xhr.status === 200) {
        resolve(JSON.parse(xhr.responseText));
        // fulfilled 异步已成功
      } else {
        reject("出错");
        // rejected 异步已失效
      }
    };
  });

// get http://localhost:3008/posts/id
// 先请求第一个文章数据，请求成功之后再请求第二个文章数据，然后再请求第三个
getPosts("http://localhost:3008/posts/1")
  .then((res) => {
    console.log(res);
    console.log("请求1结束");
    getPosts("http://localhost:3008/posts/2").then((res) => {
      console.log(res);
      console.log("请求2结束");
      getPosts("http://localhost:3008/posts/3").then((res) => {
        console.log(res);
      });
    });
  })
  .catch((err) => {
    console.log(err);
  });

// 这里是调用 下边的好一点

// then 后面的参数传递给了resolve，resolve什么时候执行，then 就什么时候执行
// .then .catch 两个方法是属于 promise 构造函数原型下的方法
// 执行 .then 和 .catch 之后都会返回一个 promise 实例，但里边什么也没有，可以通过 return 重新设置
getPosts("http://localhost:3008/posts/1")
  .then((res) => {
    console.log(res);
    // return 方法内的函数如果设置返回了新的 promise 实例的，那么就相当于给 then 方法设置了返回值
    return getPosts("http://localhost:3008/posts/2");
  })
  .catch((err) => {
    console.log(err);
    // catch 方法返回一个新的 promise，但这个 promise 内什么也没有，会自动向下执行 then
  })
  .then((res) => {
    console.log(res);
    return getPosts("http://localhost:3008/posts/3");
  })
  .then((res) => {
    console.log(res);
  });

# async

• 简单用法

  const getPosts = async () => {
    const res = await axios.get("http://localhost:3008/posts/1");
    // 这里就相当于把 axios 异步操作当成了同步操作
    // await 可以拿到resolve(then)传的参
    // 通过 await 关键字控制异步操作，await 后面一般都跟着 promise
    // res 会得到成功的返回值，并且 await 之后的操作都必须在 await 后面的异步执行完毕之后再执行
    console.log(res.data);
  };
  getPosts();
  
  const getPosts = async () => {
    const res = await axios.get("http://localhost:3008/posts/1");
    return res.data;
  };
  // async 函数返回一个 Promise 对象
  // async 函数内部 return 语句返回的值，会成为then方法回调函数的参数
  getPosts()
    .then((res) => {
      console.log(res);
    })
    .catch((err) => {
      // 捕获失败
      console.log(err);
    });

# 一些好的文章

1. https://www.cnblogs.com/lvdabao/p/es6-promise-1.html
2. https://www.jianshu.com/p/fe5f173276bd