这段代码有几个看不懂的地方

Question

fetch方法的两个then是走完第一个再走第二个的意思么

const fetchPosts = postTitle => (dispatch, getState) => {
  dispatch(requestPosts(postTitle));
  return fetch(`/some/API/${postTitle}.json`)
    .then(response => response.json())
    .then(json => dispatch(receivePosts(postTitle, json)));
  };
};

// 使用方法一
store.dispatch(fetchPosts('reactjs'));
// 使用方法二
store.dispatch(fetchPosts('reactjs')).then(() =>
  console.log(store.getState())
);

Answer 1

response.json 是一个 Promise,就是执行完第一个异步在执行第二个。

可以参考下面的连接

https://developer.mozilla.org...

Answer 2

这样对你应该好理解一点

const fetchPosts = (postTitle) => {
    return (dispatch, getState) => {
      // 这个应该只是做一个请求标识
      dispatch(requestPosts(postTitle));
      //这个是发起请求
      return fetch(`/some/API/${postTitle}.json`)
         //这里目测是json转对象
        .then((response)=> {
            return response.json();
        })
        //这里是转化之后的json,然后dispatch到receivePosts这个reducer上面
        .then(json => dispatch(receivePosts(postTitle, json)));
      };
};
}

// 使用方法一
store.dispatch(fetchPosts('reactjs'));
// 使用方法二  promise 的用法，then里面处理回调
store.dispatch(fetchPosts('reactjs')).then(() =>
  console.log(store.getState())
);

1.Promise

异步变成的解决方案

• 如何写一个基本的promise函数式

var promise = new Promise(function(resolve, reject)){
    // ... do something
    if (/*异步操作成果*/) {
        resolve(value)
    } else { /*异步操作失败*/
        reject(error)
    }
}

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。
resolve函数的作用是，将Promise实例的状态从“未完成”变为“成功”（即从 Pending 变为 Resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去
reject函数的作用是，将Promise实例的状态从“未完成”变为“失败”（即从 Pending 变为 Rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去**

__sum__:resolve 和reject 用于改变状态 

• promise如何处理确定后的异步状态

var promise = new Promise(function(resolve, reject)){
    // ... do something
    if (/*异步操作成果*/) {
        resolve(value)
    } else { /*异步操作失败*/
        reject(error)
    }
}

promise.then(function(value){ 
    // 处理成功事件
}, function(error){
    // 处理失败事件
})

该方法处理之后返回的是Promise实例

• 如何写一个串行执行流

var promise = new Promise(function(resolve,reject){
    resolve("我是第一个promise的结果");
});
var promise2 = promise.then(function(value){
    // 输出上面的值
    console.log(value);
    // 用于传递给后续的promise
    return "我是第二个promise的结果";
});

promise2.then(function(value){
    console.log(value);
});

• promise 如何处理异常（使用catch方法）

promise.then(function(data) {
    console.log('success');
}).catch(function(error) {
    console.log('error', error);
});

• 如何处理一次性处理多个promise

var pAll = Promise.all([p1,p2,p3])

p1 p2 p3 都成功 ,那么pAll就是fulfilled 状态，其中有一个失败，状态就变为rejected

var p1 = new Promise(function(resolve,reject) {
    resolve("我是第一个promise");
});

var p2 = new Promise(function(resolve,reject) {
    if(false){
        resolve("我是第二个promise");
    }else
    {
        reject("我是第二个promise  error");
    }
    
});
p2.then(function(data) {
    console.log('success');
}).catch(function(error) {
    console.log('error', error);
});

var p3 = new Promise(function(resolve,reject) {
    resolve("我是第三个promise");
});

var pAll = Promise.all([p1,p2,p3]);

pAll.then(function(data){
    console.log("all success");
}).catch(function(error){
    console.log("have one errer");
});

• 如何当多个异步处理时候，获取第一个处理完成的结果
  var p = Promise.race([p1, p2, p3]);

• 如何用简单的方式创建一个状态为resolved的Promise

Promise.resolve('Success');

/*******等同于*******/
new Promise(function (resolve) {
    resolve('Success');
});

• 如何简单的创建一个状态为rejected的Promise

Promise.reject(new Error('error'));

/*******等同于*******/
new Promise(function (resolve, reject) {
    reject(new Error('error'));
});

Answer 3

会不会用完async await之后回头再看promise好理解一点?