Antd Pro如何处理异步请求？

Antd Pro的异步请求用的是Dva，而Dva的异步又是在fetch的基础上进行了封装。
Antd Pro在services目录下存放所有后台接口，可按实际需求将接口分类放在各个不同的文件中，便于管理。
utils目录下的request.js是引入dva/fetch并进行封装的地方，将包括fetch在内的内容封装成了一个函数request()，两个参数url和option。

我们在services目录下调用request：

export async function apiName(params){
  return request(`http://192.168.1.108:8991/name/name`, {
    method:'POST',
    body:{
      ...params,
    }
  })
}

上图中，request的第一个参数为一个url，即我们要调用的后台接口地址，第二个参数是一个object，包括method和body两个字段。

来看看request.js是如何定义request的：

export default function request(url, option){...}

如我们所料，request()接收两个参数。
再看该函数返回值：

  return fetch(url, newOptions)    //返回一个fetch
    .then(checkStatus)    //返回结果后先进入checkStatus函数 检查状态码 
    .then(response => cachedSave(response, hashcode))    //状态码如果ok 返回结果 进入cachedSave函数 处理缓存问题
    .then(response => {
      if (newOptions.method === 'DELETE' || response.status === 204) {
        return response.text();
      }
      return response.json();
    })
    .catch(e => {...}    //遇到错误
    });

几种特殊场景：

场景1：同一后台接口，应用于多个界面，返回的数据结构和数量视发送的参数不同而不同。
问题：如果都用同一个reducers，存入同一个state，前面的数据会被后面的数据覆盖。如果写不同的reducers，放入不同的state，会有大量重复代码。
解决：用同一个reducers，放入不同的state。

1. 在models的state中创建多个用于存放不同的数据：

    state:{
        data1:{},
        data2:{},
        data3:{},
        data4:{},
        data5:{},
    },

2. 在effects中将数据及其名称同时put到reducers中（这一步的前提是后台返回的数据里附带了数据名称，此处的dataName即上文的data1~data5）：

              yield put({
                type:'Data',
                payload: {dataName, data},  
              })

3. 在reducers中将dataName作为key（用方括号，代表变量），data作为value：

      Data(state, action) {
        return {
          ...state,
          [action.payload.dataName]: action.payload.data,
        }
      }

这样，当请求data1时，就只会更新data1，其他保持不变，余下的同理。
场景2：有先后顺序的异步请求，即先发出请求1，得到回复后，再发出请求2。
问题：Antd Pro封装了fetch，异步请求用dispatch发送，可同时发送多异步请求，但没有严格的顺序。
解决1：在dispatch()后应用.then()。
缺点：绕过了put，所以数据无法储存在state中。

1. models中不使用put（put用于把数据存入state中，state改变则界面更新），call之后得到返回结果，直接将结果return：

effects:{
  *actionName({ payload }, { call, put }){
      const result = yield call(apiName, payload);
      return result;
    }
}

2. 在dispatch()后面使用.then()。

    dispatch({
      type:'modelName/actionName',
      payload: params,
    }).then(
      res=>{
        dispatch({
          type:'modelName/actionName',
          payload: params,
        })
      }
    )

第二个请求只在收到第一个请求的回复后才会被发出。

解决2：yield call一个Promise对象（不懂为什么一定要用Promise对象，不能仅仅用yield call吗？？？？？？？？？）

   * deleteDetails({payload}, {call, put}) {
      const result = yield call(deleteDetails, {payload});
      if (result.code !== 200) {
        throw result.msg;
      } else {
          yield call(() => {
            return new Promise((resolve) => {
              Toast.success(result.msg, 1);
              setTimeout(() => resolve(), 1000)
            });
          });
          yield put(routerRedux.goBack())
      }
    }

如果yield call的是一个Promise对象，那只有在Promise返回的是resolve方法的情况下，下面跟着的yield put及后面的代码才会执行，若返回了reject则后面的代码则全部停止执行。

这里还试了一下调用axios异步插件进行接口访问，结果为不论访问成功失败都会继续执行后面的代码，若想访问接口失败后不继续后面的代码需要在axios成功或失败的方法中返回值，然后在外面判断这个值是否正确然后再决定是否继续执行。

场景3：复杂的异步请求
问题：有时我们需要同时发送几个异步请求。甚至是同时向一个接口发送多个异步请求。
注意：effects里的一个action是多个异步请求的组合，请为需要发送多个异步请求的场景专门制作一个action。注意，在这种情况下不能一个action封装一个call和put，然后发送多个dispatch来随意组合这些action。这样会造成loading状态的混乱。
解决：向同一个接口发送多个异步请求。为避免重复写call和put，在action里使用for循环。dispatch的payload要写成数组形式。（**for循环中使用return会终止该代码块，将值存入一个数组或对象，循环结束后再返回。）

      *set({ payload }, { call, put }){
        for (let i=0; i<payload.length; i++){
          const result = yield call(XXX, payload[i])
          yield put({
             type:'XXX',
             payload: data,
          })
        }

场景4：将后台请求数据存入组件的state中（因为多个动作需要对数据进行修改），导致无法及时dispatch后无法实时更新前台显示。