其他章节请看：
请求数据
后续要做登录模块（主页），需要先和后端约定JSON数据格式，将 axios 进行封装，实现本地的数据模拟 mockjs。
Tip：spug 中后端返回 json 通常有 data 和 error两个 key。就像这样：{data: [,…], error: ""}
axios
spug 中的 axios
spug 中对 axios 的封装主要在 http.js 文件中。核心是请求拦截器和返回拦截器。源码如下：
// spugsrclibshttp.js // 引入 axios import http from 'axios' // 对 history 包最简单的封装，用于下面执行 `history.push`来切换 Url import history from './history' // X_TOKEN 登录标识，登录成功后后端返回，存在 localStorage 中 import { X_TOKEN } from './functools'; // 用户错误提示 import { message } from 'antd'; // response处理 function handleResponse(response) { let result; // 返回失败。例如 401、404 if (response.status === 401) { result = '会话过期，请重新登录'; if (history.location.pathname !== '/') { // 重新登录，登录成功后再回到当前页（from） history.push('/', {from: history.location}) } else { return Promise.reject() } // 返回成功。例如 200 } else if (response.status === 200) { // 后端携带错误信息 // 后端返回 json 通常有 data 和 error两个 key。就像这样：{data: [,…], error: ""} if (response.data.error) { result = response.data.error } else if (response.data.hasOwnProperty('data')) { return Promise.resolve(response.data.data) // 返回二进制数据 } else if (response.headers['content-type'] === 'application/octet-stream') { return Promise.resolve(response) // 不是内部（url 不是以 /api/ 开头） } else if (!response.config.isInternal) { return Promise.resolve(response.data) } else { result = '无效的数据格式' } } else { result = `请求失败: ${response.status} ${response.statusText}` } // 报错 message.error(result); return Promise.reject(result) } // 请求拦截器 http.interceptors.request.use(request => { request.isInternal = request.url.startsWith('/api/'); // 对内部 url 增加 X-Token 标识。初次登陆 X-Token 为 null if (request.isInternal) { request.headers['X-Token'] = X_TOKEN } // 请求超时设置为 30 秒 request.timeout = request.timeout || 30000; return request; }); // 返回拦截器 http.interceptors.response.use(response => { return handleResponse(response) }, error => { if (error.response) { return handleResponse(error.response) } const result = '请求异常: ' + error.message; message.error(result); return Promise.reject(result) }); export default http; 用法大致就像这样（请看 Dashboard 模块中的 store.js）：
import http from 'libs/http'; http.get('/api/cicd/gitlab/') .then(res => this.gitlabList = res) myspug 引入 axios
创建 myspugsrclibshttp.js 文件，内容和 spug 相同
创建 history.js 文件，内容和 spug 相同
// myspugsrclibshistory.js import {createBrowserHistory} from 'history'; export default createBrowserHistory() 创建 functools.js，目前只需要导出 X_TOKEN 即可。spug 中的 functools.js 涉及权限，后续我们可能会用上。
// myspugsrclibsfunctools.js export let X_TOKEN; 疑惑：在研究 react 路由时，我们自己实现了一个路由，使用 history 时发现它会导致浏览器 url 的变化，我们会通过 history.listen 来监听地址变化，而在 spug 官网中执行 history.push 不仅可以切换url，而且路由也发生了变化，但笔者没有在源码中找到 history.listen 的相关代码
mock
详细介绍请看 这里
spug 默认没有 mockjs，笔者将其加入 myspug 中，方便后续前端开发。
Tip: 内网可以使用 docker 方式快速搭建 yapi（高效、易用、功能强大的可视化接口管理平台）
大致步骤如下：
- 安装 mockjs 包，上文我们已经安装完毕
- 新建 src/mock/index.js
- 最后在 src/index.js 中引入 mock
最后在 App.js 中测试：
// myspugsrcApp.js // import http from 'libs/http'; import http from '@/libs/http'; export default function App() { http.post('/api/account/login/', {}) .then(data => console.log('data', data)) return ( <div className="App">...</div > ); } 控制台输出：
data {id: 1, access_token: '5bb076db06fd4001b85d12e44ab96c56', nickname: '管理员', is_supper: true, has_real_ip: true, …} 注：spug 中引入 http 直接是 import http from 'libs/http';，在 vscode 中按住 ctrl 并将鼠标移至 libs/http 能进入该文件，而笔者的 myspug 却报错，提示./lib/http。找不到原因，只能求其次，通过增加别名 @ 来避免相对符号 ../../../
// config-overrides.js const { override, fixBabelImports,addWebpackAlias } = require('customize-cra'); const path = require('path') module.exports = override( ..., addWebpackAlias({ '@': path.resolve(__dirname, './src') }) ); 扩展
修改默认启动端口 3000
由于 create-react-app 启动端口默认是 3000，笔者为了方便研究，需要同时启动 spug 和 myspug 两个项目，这里将 spug 的端口改为 3010。
// package.json "scripts": { - "start": "react-app-rewired start", + "start": "set PORT=3010 && react-app-rewired start", 其他章节请看：
