首页 > 其他分享 >react 高效高质量搭建后台系统 系列 —— 请求数据

react 高效高质量搭建后台系统 系列 —— 请求数据

时间:2023-01-04 15:44:07浏览次数:72  
标签:http spug 高质量 js react 后台 data response history

其他章节请看:

react 高效高质量搭建后台系统 系列

请求数据

后续要做登录模块(主页),需要先和后端约定JSON数据格式,将 axios 进行封装,实现本地的数据模拟 mockjs

Tip:spug 中后端返回 json 通常有 data 和 error两个 key。就像这样:{data: [,…], error: ""}

axios

spug 中的 axios

spug 中对 axios 的封装主要在 http.js 文件中。核心是请求拦截器返回拦截器。源码如下:

// spug\src\libs\http.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

创建 myspug\src\libs\http.js 文件,内容和 spug 相同

创建 history.js 文件,内容和 spug 相同

// myspug\src\libs\history.js

import {createBrowserHistory} from 'history';

export default createBrowserHistory()

创建 functools.js,目前只需要导出 X_TOKEN 即可。spug 中的 functools.js 涉及权限,后续我们可能会用上。

// myspug\src\libs\functools.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 中测试:

// myspug\src\App.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",

其他章节请看:

react 高效高质量搭建后台系统 系列

标签:http,spug,高质量,js,react,后台,data,response,history
From: https://www.cnblogs.com/pengjiali/p/17025037.html

相关文章

  • react 快速接入 sentry,性能监控与错误上报踩坑日记
    壹❀引本文是我入职第一个月所写,在主导基建组的这段时间也难免会与错误监控和性能监控打交道,因为公司主要考虑接入sentry,所以对于接入sentry的基建任务也提了一些需求,......
  • 后台返回 文件地址 直接下载到本地不打开新窗口
    handleDownload=(url,filename)=>{ constx=newwindow.XMLHttpRequest(); x.open('GET',url,true); x.responseType='blob'; x.onload=()=>{ letti......
  • React Streaming SSR 原理解析
    作者:徐超功能简介React18提供了一种新的SSR渲染模式:StreamingSSR。通过StreamingSSR,我们可以实现以下两个功能:StreamingHTML:服务端可以分段传输HTML到浏览......
  • SimpleAdmin:一个基于.NET6/7+Vue3+Fruion+Sqlsugar的通用后台管理系统
    SimpleAdmin⚡️麻雀虽小,五脏俱全!⚡️......
  • React 小案例 订单列表评价
    最终效果图:1.功能:各功能组件的组合和渲染   2.点击评价按钮评论组件出现,可输入文字和打分,点击取消按钮关闭评论3.点击提交按钮显示已评价 结构:1.在src下创建components......
  • React 小案例 列表添加删除功能
    所有代码importReact,{Component,Fragment}from'react'classTodoListextendsComponent{constructor(props){super(props);this.state={......
  • react高阶组件
    1.首先介绍高阶函数基本概念:函数可以作为参数被传递:函数可以作为返回值输出: 2.高阶组件组件作为参数被传递,返回值是一个组件高阶组件是一个函数案例:将A组件作为公共组件,BC......
  • react Redux 用Redux中央仓库实现一个todolist
     Redux简单介绍Redux是一个用来管理管理数据状态和UI状态的JavaScript应用工具。随着JavaScript单页应用(SPA)开发日趋复杂,JavaScript需要管理比任何时候都要多的state(状态),Re......
  • React 小案例 无线首页底部导航组件
    效果:底部页面导航点击当前图标图标高亮页面结构1.将所用到的小图标文件放置在static文件夹下2.在src下新建tabbar文件夹,用于存放组件资源3.页面代码注意:将本页面的css引入......
  • React 小案例 路由跳转
    在上篇的基础上做路由跳转:​​上篇​​安装路由及代码:安装:cnpmi-Sreact-router-dom1.在pages里创建四个跳转页面 2.在src文件夹下创建router.js,router.js全部内容:首先引......