React学习笔记(9)Promise

阮一峰ES6 Promise

Promise定义

---

Promise 是异步编程的一种解决方案,所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

Promise对象有以下两个特点
1.对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态.
2.一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected.

Promise基本用法

---

Promise对象是一个构造函数，用来生成Promise实例.Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。写法如下：

new Promise(function(resolve, reject) {
            if(/* 异步操作成功 */) {
                resolve("xxxx");
            } else {
                reject(error);
            }
 })；

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

  new Promise(function(resolve, reject) {
            if(1==2) {
                
                resolve("从 pending 变为 resolved");
            } else {
                reject(new Error("从 pending 变为 rejected"));
            }
}).then(value => console.log("value:" + value))
.catch(error=> console.log("error:" + error));

finally().和java一摸一样，es6也引入了finally，不管promise最后的状态，在执行完then或catch指定的回调函数以后，都会执行finally方法指定的回调函数。

 new Promise(function(resolve, reject) {
            if(1==2) {
                
                resolve("从 pending 变为 resolved");
            } else {
                reject(new Error("从 pending 变为 rejected"));
            }
}).then(value => console.log("value:" + value))
.catch(error=> console.log("error:" + error))
 .finally(()=> console.log("和java一样finally中的方法总会执行！"));

还有一些其他用法，像try catch这块跟java用法一样。

fetch

---

Fetch API 是基于 Promise 设计.
最简单的get请求，请求https://api.github.com/users/Fire-zy/repos接口返回json格式数据。取出name属性展示。

   constructor() {
        super();
        this.state = {
            data : []
        }
    }
    componentDidMount() {
        fetch("https://api.github.com/users/Fire-zy/repos")
        .then(response => {
            return response.json();
        }).then(data => {
            this.setState({
                data: data
            });
           // console.log(data);
        });
    }

    render() {
        console.log(this.state.data);
        return (
            <div>
               <ul>
                 {
                     this.state.data.map((item, index)=> {
                        return <li key={index}>{item.name}</li>
                     })
                 }
               </ul>
            </div>
        )
    }

post请求

let postData = {a:'b'};
fetch('http://data.xxx.com/Admin/Login/login', {
  method: 'POST',
  mode: 'cors',
  credentials: 'include',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: JSON.stringify(postData)
}).then(function(response) {
  console.log(response);
});