react相关知识点记录

1. async/await

理解 JavaScript 的 async/await

async 的作用

async 函数返回的是一个 Promise 对象

如果在函数中 return 一个直接量，async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象，直接可以用then() 链来处理这个 Promise 对象

如果 async 函数没有返回值，会返回 Promise.resolve(undefined)。

await 到底在等啥

await 只能出现在 async 函数中

await 等待的是一个表达式，这个表达式的计算结果是 Promise 对象或者其它值（换句话说，就是没有特殊限定）

如果它等到的不是一个 Promise 对象，那 await 表达式的运算结果就是它等到的东西

如果它等到的是一个 Promise 对象，await 就忙起来了，它会阻塞后面的代码，等着 Promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果

举例

// APP中获取did
const getAppDid = () => new Promise((resolve, reject) => {
    if (window.self !== window.top) {
        if (appDid) {
            resolve(appDid);
        } else {
            clearTimeout(timer);
            timer = setTimeout(() => {
                if (appDid) {
                    resolve(appDid);
                } else {
                    reject();
                }
            }, 200);
        }
        return;
    }
});

static async follow(token, rid) {
        const did = await getAppDid();

        return new Promise((resolve, reject) => {
            getAppCsrf(() => {
                ajaxFn({
                    url: config.follow,
                    type: 'POST',
                    data: {
                        rid,
                        did,
                        token,
                        [$SYS.tn]: mCookie.getItem($SYS.tvk)
                    },
                    success: (res) => {
                        resolve(res);
                    },
                    error: () => {
                        reject();
                    }
                });
            });
        });
    } 

2. redux-thunk 和 redux-observable

关于异步操作

redux-observable

redux-observable 使用小记

自动响应我们所dispatch的actions并执行对应的函数，把复杂的异步函数分离到一些Epic的函数里面

redux-observable 将从 ui 触发的 action 转化为一个数据流，并且订阅它。当数据流有数据发出时，这个流的数据管道中设置了对此数据流做的一系列的操作符（ rxjs 提供），数据流通过管道后，将最终的流转成 action

Epics函数

传进一个action，然后return一个新的、不一样的action

这个Epics函数是一个发射器，因此我们能够subscribe它，从而可以监听并收到新的action

每当我们调用redux的dispatch的时候，所有的Epics函数都会执行

import { Observable } from 'rxjs/Rx';
import { ajax } from 'rxjs/observable/dom/ajax';

import * as actions from '../actions';
// action将封装成Observable对象传入到函数内
function fetch(action$) {
    // 使用ofType方法匹配相应的action
    return action$.ofType('GET_DATA')
        // switchMap 是一个高阶的操作符，它一般用在 ajax 网络服务请求上，主要处理多个内部 Observable 对象产生并发的情况下，只订阅最后一个数据源，其他的都退订，这样的操作符，非常适合网络请求
        .switchMap(action => {