08-定义 Services
优质
小牛编辑
128浏览
2023-12-01
之前我们已经:
- 设计好了 model state -> 抽象数据
- 完善了组件 -> 完善展示
- 添加了 Reducers -> 数据同步处理
- 添加了 Effects -> 数据异步处理
接下来就是将请求相关(与后台系统的交互)抽离出来,单独放到 /services/
中,进行统一维护管理,所以我们只需要将之前定义在 Effects 的以下代码,移动到 /services/users.js
中即可:
// request 是我们封装的一个网络请求库
import request from '../utils/request';
import qs from 'qs';
export async function query(params) {
return request(`/api/users?${qs.stringify(params)}`);
}
// ./src/utils/request.js
import fetch from 'dva/fetch';
function parseJSON(response) {
return response.json();
}
function checkStatus(response) {
if (response.status >= 200 && response.status < 300) {
return response;
}
const error = new Error(response.statusText);
error.response = response;
throw error;
}
/**
* Requests a URL, returning a promise.
*
* @param {string} url The URL we want to request
* @param {object} [options] The options we want to pass to "fetch"
* @return {object} An object containing either "data" or "err"
*/
export default function request(url, options) {
return fetch(url, options)
.then(checkStatus)
.then(parseJSON)
.then((data) => ({ data }))
.catch((err) => ({ err }));
}
然后在 users model 中引入:
import { query } from '../services/users';
之后无论是更新,删除、添加等操作,跟用户相关的都可以统一放置在 /services/users.js
中。
代码写到这里,你可以看到浏览器中的显示是这样的:
没错,我们虽然有了接口,但是我们还没有数据,在 dva 中,我们配套的工具能够很方便的模拟数据,这样就可以脱离服务器复杂的环境进行模拟的本地调试开发。下面一节就会一起来看下,如何 mock 数据。
下一步,进入mock数据。