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。
- 在models的state中创建多个用于存放不同的数据：
state:{
data1:{},
data2:{},
data3:{},
data4:{},
data5:{},
},
- 在effects中将数据及其名称同时put到reducers中（这一步的前提是后台返回的数据里附带了数据名称，此处的dataName即上文的data1~data5）：
yield put({
type:'Data',
payload: {dataName, data},
})
- 在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中。
- models中不使用put（put用于把数据存入state中，state改变则界面更新），call之后得到返回结果，直接将结果return：
effects:{
*actionName({ payload }, { call, put }){
const result = yield call(apiName, payload);
return result;
}
}
- 在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后无法实时更新前台显示。
| 两种情景 |
|---|
| 查询到的数据=>先存入model的state=>在render()中通过this.props引用=>在界面上显示并实时更新 |
| 查询到的数据=>先存入model的state=>在组件中通过某一个事件被存入组件的state=>组件中有多个事件都可对数据进行修改并将修改结果返回后台=>再次查询到的数据由于只有某一特定事件才能将其存入state，所以在事件触发前界面无法实时更新 |
网友评论