说一下对Promise的了解

说一下对Promise的了解

一. 什么是promise

1. promise是异步编程的一种方案，解决了地狱回调的问题，是一种链式调动的方式

2. Promise 简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

3. promise 是一个对象，从它可以获取异步操作的的最终状态（成功或失败）。

4. Promise是一个构造函数，对外提供统一的 API，自己身上有all、reject、resolve等方法，原型上有then、catch等方法。

二. 名词约定

1. promise（首字母小写）对象指的是“Promise实例对象”

2. Promise 首字母大写且单数形式，表示“Promise构造函数”

3. Promises 首字母大写且复数形式，用于指代“Promises规范”

Promise的两个特点

（1）Promise对象的状态不受外界影响

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果

3.promise的三个状态：

1）pending 初始状态

2）fulfilled 成功状态

3）rejected 失败状态

Promise 只有异步操作的结果可以决定当前是哪一种状态，只能由 pending变成fulfilled或者由pending变成rejected

Promise接受一个「函数」作为参数，该函数的两个参数分别是resolve和reject。

resolve函数的作用：在异步操作成功时将参数传递出去；

reject函数的作用：在异步操作失败将参数传递出去

then()方法： then 方法就是异步操作执行完后，用链式调用的方式执行回调函数。

catch()方法： 当执行 resolve 的回调抛出异常了（代码出错了），会进到这个 catch 方法中。

all()方法： Promise 的 all方法在所有异步操作执行完后才执行回调。

race()方法：而 race 的话只要有一个异步操作执行完毕，就立刻执行 then 回调。

4.promis的使用案例

//Promise异步封装ajax

function Feach(method, url) {
  let p = new Promise((resolve, reject) => {
    // 手写原生ajax
    let xhr = new XMLHttpRequest(); //创建ajax请求
    xhr.open(method, url, true); //发起请求
    xhr.send(null); //发送请求，发送的参数是空的
    //异步回调函数
    xhr.onreadystatechange = function() {

      //readystate：请求返回五种状态
      // 0(未初始化):还没有调用send()方法
      // 1(载入):已调用send()方法，正在发送请求
      // 2(载入完成):send()方法执行完成，已经接收全部响应内容
      // 3(交互):正在解析响应内容
      // 4(完成):响应内容解析完成，可以在客户端调用了
      if (xhr.readyState == 4 && xhr.status == 200) {
        resolve(xhr.responseTex t); //responseText:获取字符式的响应数据 responseXML:获取XML形式的响应数据
      } else if (xhr.status == 400) {
        reject('失败')
      }
    }
  })
  return p;
}

let url = "http://wthrcdn.etouch.cn/weather_mini?city=%E5%8C%97%E4%BA%AC";

Feach('get', url).then(res => {
  console.log(res)
}, err => {
  console.log(err)
})

	//promise异步加载图片

	// 创建一个函数
	function requestImg() {
	  // 创建一个promise对象
	  var p = new Promise(function(resolve, reject) {
	    // 创建一个图像对象
	    var img = new Image();
	    // 图像在页面加载完成后执行成功的回调
	    img.onload = function() {
	      resolve(img);
	    }
	    img.src = "./qzone.png"
	  });
	  return p;
	}

	//延时函数，用于给请求计时
	function timeout() {
	  // 创建一个promise对象，如果请求超时则执行错误的回调
	  var p = new Promise(function(resolve, reject) {
	    setTimeout(() => {
	      let span = documnet.createElement('span')
	      span.innerText = '加载失败'
	      resolve(span);
	    }, 5000);
	  });
	  return p;
	}
	// promise执行一次后如果执行成功就执行then方法，否则执行catch方法
	Promise.race([requestImg(), timeout()]).then(function(results) {
	  console.log(results);
	}).catch(function(reason) {
	  console.log(reason)
	});
	//上面代码requestImg函数异步请求一张图片，timeout函数是一个延时5秒的异步操作，我们将他们在一起放在race中赛跑
	//如果5秒内图片请求成功那么便进入then方法，执行正常的流程。
	// 如果5秒内图片还未成功返回，那么则进入catch，报“图片请求超时”的信息