使用dva实现的request.js请求工具函数utils封装 并且发送请求

最新推荐文章于 2024-08-06 15:29:34 发布
最新推荐文章于 2024-08-06 15:29:34 发布
阅读量5.4k 收藏 6
点赞数 4
分类专栏： 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hzxOnlineOk/article/details/98955867
版权

request.js： 

import fetch from 'dva/fetch';
import {
  notification
} from 'antd';
import qs from 'querystring';

const codeMessage = {
  200: '请求成功',
  201: '新建或修改数据成功',
  202: '一个请求已经进入后台队列',
  204: '删除数据成功',
  400: '请求失败',
  401: 'token失效',
  403: '禁止访问',
  404: '请求失败',
  406: '请求方式错误',
  500: '服务器错误',
  502: '网关错误',
  503: '服务不可用',
  504: '网关超时',
};

// 检查ajax返回的状态
function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }

  /**
   * 暂时没用，服务端返回的 status 始终为200
   *
   * @type {*|string|string}
   */
  const errorText = codeMessage[response.status] || response.statusText;
  notification.error({
    message: `请求错误 ${response.status}: ${response.url}`,
    description: errorText,
  });

  const error = new Error(response.statusText);
  error.name = response.status;
  error.response = response;
  throw error;
}

// fetch超时处理
const TIMEOUT = 100000;
const timeoutFetch = (url, options) => {
  let fetchPromise = fetch(url, options);
  let timeoutPromise = new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error('请求超时')), TIMEOUT);
  });
  return Promise.race([fetchPromise, timeoutPromise]);
};

/**
 * 请求url，返回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) {
  const defaultOptions = {
    credentials: 'include',
    method: 'GET',
    mode: 'cors',
  };
  const mergeOptions = {
    ...defaultOptions,
    ...options
  };
  const userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'));
  const appKey = window.sessionStorage.getItem('appKey');

  mergeOptions.headers = {
    accept: 'application/json',
    'content-type': 'application/json; charset=utf-8',
    ...mergeOptions.headers,
  };
  if (appKey) mergeOptions.headers.uuuappkey = appKey;
  if (userInfo) mergeOptions.headers.uuutoken = userInfo.sessionId;

  if (mergeOptions.method !== 'GET') {
    mergeOptions.body = JSON.stringify(mergeOptions.body);
  }

  if (mergeOptions.method !== 'POST' && mergeOptions.params) {
    url = `${url}${url.indexOf('?') !== -1 ? '&' : '?'}${qs.stringify(mergeOptions.params)}`;
  }

  if (!mergeOptions.hideTime && !mergeOptions.params) {
    url = `${url}?timeStamp=${new Date().getTime()}`;
  }

  return timeoutFetch(url, mergeOptions)
    .then(checkStatus)
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      if (data.code === 200 || data.success === true) {
        return data;
      }
      if (data.code === 300) { // 接口出错
        return data;
      }
      if (data.code === 401) { // token失效
        notification.error({
          message: 'token失效',
          description: data.msg,
          key: 'error'
        });
        window.g_app._store.dispatch({
          type: 'app/logout'
        });
        return data;
      }
      if (data.code === 403) { // 没有权限
        notification.error({
          message: '没有权限',
          description: data.msg,
          key: 'error'
        });
        return data;
      }
      if (data.code >= 404 && data.code < 422) {
        notification.error({
          message: '请求失败',
          description: data.msg,
          key: 'error'
        });
        return data;
      }
      if (data.code <= 504 && data.code >= 500) {
        notification.error({
          message: '服务器错误',
          description: data.msg,
          key: 'error'
        });
        return data;
      }
    })
    .catch((error) => {
      const {
        response
      } = error;

      let msg;
      let statusCode;
      if (response && response instanceof Object) {
        const {
          status,
          statusText
        } = response;
        statusCode = status;
        msg = statusText;
      } else {
        statusCode = 600;
        msg = 'Network Error';
      }

      return Promise.reject({
        success: false,
        code: statusCode,
        msg
      });
    });
}

调用：

import request from '../utils/request';
import { apiPrefix } from '../config/projectConfig';

// 获取 scheme 列表
export function oracleSchema() {
  return request(`${apiPrefix}/api_manager/interface/api/fetchOracleSchemas`);
}

// 接口菜单层级树
export function interfaceLevel(pid) {
  return request(
    `${apiPrefix}/api_manager/interface/api/getAPILevelTree?pid=${pid}`,{
      hideTime: true,
    });
}

// 获取目录树
export function catalogTree() {
  return request(`${apiPrefix}/api_manager/interface/api/getAPICatalogTree`);
}

// 搜索菜单树
export function searchLevelTree(search) {
  return request(
    `${apiPrefix}/api_manager/interface/api/searchAPILevelTree?search=${search}`, {
      hideTime: true,
    });
}

// 查询接口上级分类树
export function apiDirectory(apiId) {
  return request(`${apiPrefix}/api_manager/interface/api/getAPIDirectory?apiId=${apiId}`, {
    hideTime: true,
  });
}

// 新增 API 树目录
export function addApiTree(params) {
  return request(`${apiPrefix}/api_manager/interface/api/addApiTree`, {
    method: 'POST',
    body: params,
  });
}

// 删除 API 树目录
export function delApiTree(params) {
  return request(`${apiPrefix}/api_manager/interface/api/deleteApiTree?apiTreeId=${params.apiTreeId}`, {
    method: 'DELETE',
    hideTime: true,
  });
}

/************************************************************************
 * 接口相关
 ************************************************************************/

// 接口列表
export function apiList(params, pageNum, pageSize) {
  return request(`${apiPrefix}/api_manager/interface/api/getApiList`, {
    method: 'POST',
    body: { ...params, pageNum, pageSize },
  });
}

// 新增接口
export function addApi(params) {
  return request(`${apiPrefix}/api_manager/interface/api/addApi`, {
    method: 'POST',
    body: params,
  });
}

// 修改接口
export function updateApi(params) {
  return request(`${apiPrefix}/api_manager/interface/api/updateApi`, {
    method: 'PUT',
    body: params,
  });
}

// 删除接口
export function delApi(params) {
  return request(`${apiPrefix}/api_manager/interface/api/deleteApi?apiId=${params.apiId}`, {
    method: 'DELETE',
    hideTime: true,
  });
}

/************************************************************************
 * sql相关
 ************************************************************************/

// 获取 sql
export function getApiSqlInfo(params) {
  return request(`${apiPrefix}/api_manager/interface/api/getApiSqlInfo?apiId=${params.apiId}`, {
    hideTime: true,
  });
}

// 保存
export function interfaceDefSave(params) {
  return request(`${apiPrefix}/api_manager/interface/api/interfaceDefSave`, {
    method: 'POST',
    body: params,
  });
}

// 获取模型列表 - 表名
export function getBizList(params, pageNum, pageSize) {
  return request(`${apiPrefix}/api_manager/interface/api/getBizList`, {
    method: 'POST',
    body: { ...params, pageNum, pageSize },
  });
}

// 获取模型列表 - 列名
export function getBizColList(bizId) {
  return request(`${apiPrefix}/api_manager/interface/api/getBizColList?bizId=${bizId}`, {
    hideTime: true,
  });
}

// 解析 sql 获得 select item 列表(出参)
export function selectItemsForSql(params) {
  return request(`${apiPrefix}/api_manager/interface/api/getSelectItemsForSql`, {
    method: 'POST',
    body: params,
  });
}

// 获取 procedure info
export function procedureInfo(params) {
  return request(`${apiPrefix}/api_manager/interface/api/fetchOracleProcedureInfo`, {
    method: 'POST',
    body: params,
  });
}

// 获取 procedure params
export function procedureParams({ owner, procedureName }) {
  return request(`${apiPrefix}/api_manager/interface/api/fetchOracleAllProcedureParams`, {
    params: {
      owner,
      procedureName,
    },
  });
}

/************************************************************************
 * auth相关
 ************************************************************************/

// 获取系统名
export function appNameApi({ apiId }) {
  return request(`${apiPrefix}/menu_manager/menu/api/getAppNameForApi?apiId=${apiId}`, {
    method: 'POST',
    hideTime: true,
  });
}

// 获取指标列表
export function indexAppName(params) {
  return request(`${apiPrefix}/menu_manager/menu/api/getIndexForAppName`, {
    method: 'POST',
    body: params,
  });
}

// 保存 auth
export function addIndexAppName(params) {
  return request(`${apiPrefix}/menu_manager/menu/api/addIndexForAppName`, {
    method: 'POST',
    body: [...params],
  });
}

dva模型调用： 

import { message } from 'antd';
import modelExtend from 'dva-model-extend';

import { pageModel } from '../../../utils/util';
import {
	addApiTree,
	addApi,

	getApiSqlInfo,
	interfaceDefSave,

	selectItemsForSql,
	procedureInfo,
	procedureParams,

	appNameApi,
	indexAppName,
	addIndexAppName,
} from '../../../services/modelInterface';

export default modelExtend(pageModel, {
	namespace: 'interfaceModal',

	state: {
		interfaceDef: {},
	},

	effects: {
		// 获取 接口定义
		* getApiSqlInfo({ payload }, { call, put }) {
			const { success, data } = yield call(getApiSqlInfo, payload);

			if (success) {
				if (data.apiType === 0) data.apiType = 1;
				yield put({
					type: 'updateState',
					payload: {
						interfaceDef: data,
					},
				});

				return true;
			} else {
				message.error('初始化失败');
			}
		},

    /************************************************************************
     * sql 弹窗相关
     ************************************************************************/
		// sql弹窗保存
		* interfaceDefSave({ payload }, { call }) {
			const { success } = yield call(interfaceDefSave, payload);
			if (success) return true;
		},

		// 解析 sql 获得 select item 列表(出参)
		* getSelectItemsForSql({ payload }, { call }) {
			const { success, data } = yield call(selectItemsForSql, payload);
			if (success) return data;
		},

		// 获取 oracleChildSchema
		* procedureInfo({ payload }, { call }) {
			const { success, data } = yield call(procedureInfo, payload);
			if (success) return data.list;
		},

		// 获取 SP 入参字段
		* procedureParams({ payload }, { call }) {
			const { success, data } = yield call(procedureParams, payload);
			if (success) return data;
		},

    /************************************************************************
     * auth 弹窗相关
     ************************************************************************/

		// 获取系统名
		* appNameApi({ payload }, { call }) {
			const { success, data } = yield call(appNameApi, payload);
			if (success) return data;
		},

		// 获取指标
		* indexAppName({ payload }, { call }) {
			const { success, data } = yield call(indexAppName, payload);
			if (success) return data;
		},

		// 保存auth
		* addIndexAppName({ payload }, { call }) {
			const { success } = yield call(addIndexAppName, payload);
			if (success) return true;
		},
	},
});

模块组成：

组件具体使用：

import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import { Col, Row, Button, Modal, Collapse, Card, Icon, Tooltip, Form, Input } from 'antd';
import { ContextMenu, MenuItem } from 'react-contextmenu';
import { Page, SearchTree, CommonTable, CustomModal, CustomForm, CommonSearch, Breadcrumb } from '@/components';
import { apiList } from '../../services/modelInterface';

import { modelInterfaceColumns, participationColumns } from './config/columns';
import { sqlForm, folderForm, interfaceForm } from './config/form';
import { modelInterfaceSearch } from './config/search';
import { getCrumb } from '../../utils/util';
import ModalView from './components';
import style from './index.less';

const { Panel } = Collapse;
const { TextArea } = Input;

@connect(({ modelInterface, loading }) => ({
	...modelInterface,
	loading,
}))

class ModelInterface extends Component {
	tableRef = React.createRef();
	state = {
		editable: false,
		searchParams: {},
		selectedNode: {},

		visible: false, // 模态框状态
		modalType: '', // 模态框类型
		record: {},   // 编辑时原始数据
	};

	static getDerivedStateFromProps(props, state) {
		const { dispatch, selectedNode } = props;
		if (props.selectedNode !== state.selectedNode && props.selectedNode) {
			const { id, isDirectory } = props.selectedNode;

			if (id) {
				dispatch({ type: 'modelInterface/getBizDirectory', id });
				if (!isDirectory) {
					// dispatch({ type: 'bizFormTable/bizInfo', payload: { id } });
				}

				return { selectedNode };
			}
		}

		return null;
	}

	// 处理搜索
	handleSearch = (values) => {
		this.setState({ searchParams: values });
	};

	// 模态框状态处理
	showModal = async ({ record, modalType }) => {
		const { dispatch } = this.props;
		if (modalType === 'sql') {
			const data = await dispatch({ type: 'interfaceModal/getApiSqlInfo', payload: { apiId: record.apiId } });
			if (!data) return;
		}

		this.setState({ visible: true, modalType, record });
	};
	closeModal = () => this.setState({ visible: false, modalType: '', record: {} });

	// 选择接口
	handleSelect = async (keys, { node }) => {
		const { dispatch, selectedNode } = this.props;
		const dataRef = node.props['dataRef'];
		const flag = selectedNode.id !== dataRef.id;

		if (flag) {
			this.setState({ editable: false });
			if (dataRef['subNodeNum']) {
				await dispatch({ type: 'modelInterface/levelTreeList', pid: dataRef.id });
			}
			dispatch({ type: 'modelInterface/updateState', payload: { selectedNode: dataRef } });
		}
	};

	// 新增目录
	handleAddFolder = (e, data, target) => {
		const nodeItem = JSON.parse(target.getAttribute('data-item'));
		this.setState({ visible: true, modalType: 'folder', record: { upperApiTreeId: nodeItem.id } });
	};

	// 删除目录
	handleDelFolder = (e, data, target) => {
		const nodeItem = JSON.parse(target.getAttribute('data-item'));

		Modal.confirm({
			title: '提示',
			content: '你确定删除该目录嘛?',
			onOk: async () => {
				const { dispatch } = this.props;
				await dispatch({ type: 'modelInterface/delApiTree', payload: { apiTreeId: nodeItem.id } });
				dispatch({ type: 'modelInterface/interfaceTree' });
			},
			onCancel() { },
		});
	};

	// 删除接口
	handleDelInterface = (e, data, target) => {
		const nodeItem = JSON.parse(target.getAttribute('data-item'));
		Modal.confirm({
			title: '提示',
			content: '你确定删除该接口嘛?',
			onOk: async () => {
				const { dispatch } = this.props;
				await dispatch({ type: 'modelInterface/delApi', payload: { apiId: nodeItem.id } });
				this.tableRef.current.handleFirstPage();
			},
			onCancel() { },
		});
	};

	// 保存
	handleSubmit = async (values) => {
		const { modalType, record } = this.state;
		const { dispatch } = this.props;

		if (modalType === 'folder') {
			await dispatch({
				type: 'modelInterface/addApiTree',
				payload: { ...record, ...values },
			});
			dispatch({ type: 'modelInterface/interfaceTree' });
		}

		// 新增或编辑接口
		if (modalType === 'updateApi' || modalType === 'addApi') {
			const params = record && record.apiId ? { ...values, apiId: record.apiId } : values;
			await dispatch({
				type: `modelInterface/${modalType}`,
				payload: params,
			});
			this.tableRef.current.handleFirstPage();
		}
	};

	// 面包屑点击
	handleCrumbClick = async (item) => {
		const { dispatch } = this.props;
		dispatch({ type: 'modelInterface/levelTreeList', pid: item.id });
	};

	render() {
		const { visible, modalType, record, searchParams } = this.state;
		const { selectedNode, interfaceTree, expandedKeys, directoryInfo, catalogTree, dispatch, loading, form } = this.props;
		console.log('interfaceTree>>>>>', interfaceTree)

		const columns = [
			...modelInterfaceColumns,
			{
				title: '操作',
				dataIndex: 'operator',
				render: (text, record) => (
					<div className="btn-group">
						<Button type="primary" size="small" onClick={() => this.showModal({ modalType: 'sql', record })}>SQL</Button>
						<Button type="primary" size="small" onClick={() => this.showModal({ modalType: 'updateApi', record })}>修改</Button>
						<Button type="primary" size="small" onClick={() => this.showModal({ modalType: 'auth', record })}>授权</Button>
					</div>
				),
			},
		];
		const paramsColumns = [
			...participationColumns,
			{
				title: '操作',
				dataIndex: 'operator',
				render: (text, record) => (
					<div className="btn-group">
						<Button type="primary" size="small" onClick={() => this.showModal({ modalType: 'sql', record })}>SQL</Button>
						<Button type="primary" size="small" onClick={() => this.showModal({ modalType: 'updateApi', record })}>修改</Button>
						<Button type="primary" size="small" onClick={() => this.showModal({ modalType: 'auth', record })}>授权</Button>
					</div>
				),
			},
		];

		return (
			<Page className="pageContainer" loading={loading.effects['modelInterface/interfaceTree']}>
				<Row gutter={12}>
					{/* 树列表 */}
					<Col xs={{ span: 24 }} lg={{ span: 6 }} className="treeNav">
						<SearchTree
							dispatch={dispatch}
							placeholder='请输入表名称'
							config={{ key: 'id', title: 'name' }}
							showRightMenu={true}
							showRemoteSearch={true}
							treeData={interfaceTree}
							defaultExpandedKeys={expandedKeys}
							iconFlagOptions={{ icon: 'api' }}
							handleSelect={this.handleSelect}
							modelFunc="modelInterface/searchTreeWithColCount"
						/>

						<ContextMenu id="parent_unique_identifier">
							<MenuItem key="addInterface" onClick={() => this.showModal({ modalType: 'addApi' })}>新增接口</MenuItem>
							<MenuItem divider />
							<MenuItem key="addFolder" onClick={this.handleAddFolder}>新增目录</MenuItem>
							<MenuItem divider />
							<MenuItem key="delFolder" onClick={this.handleDelFolder}>删除目录</MenuItem>
						</ContextMenu>

						<ContextMenu id="child_unique_identifier">
							<MenuItem key="delInterface" onClick={this.handleDelInterface}>删除接口</MenuItem>
						</ContextMenu>
					</Col>

					{/* 表格列表 */}
					<Col xs={{ span: 24 }} lg={{ span: 18 }} className="tableContainer">
						<div className="gutter-box">
							<Breadcrumb breadcrumbList={getCrumb(directoryInfo, { title: 'name', click: this.handleCrumbClick })} />

							{/* <CommonSearch
								style={{ marginTop: 12 }}
								columnNumber={2}
								showResetBtn={false}
								formList={modelInterfaceSearch}
								handleSearch={this.handleSearch}
							/> */}

							<Collapse defaultActiveKey={['1']} style={{ marginBottom: 20 }} >
								<Panel header="sql信息" key="1">
									<div>1111</div>
								</Panel>
							</Collapse>

							<Collapse defaultActiveKey={['1']} style={{ marginBottom: 20 }} >
								<Panel header="入参" key="1">
									<CommonTable
										rowKey="apiId"
										bordered={false}
										selectType={false}
										ref={this.tableRef}
										columns={paramsColumns}
										fetchList={apiList}
										searchParams={{ upperId: selectedNode.id, ...searchParams }}
									/>
								</Panel>
							</Collapse>

							{/* 系统 */}
							<Row gutter={24}>
								{[{ appName: 'UCM', appComment: '系统内容' }, { appName: 'ACP', appComment: '系统内容' },] > 0 && [{ appName: 'UCM', appComment: '系统内容' }, { appName: 'ACP', appComment: '系统内容' },].map((sys, index) => (
									<Col span={6} key={sys.appKey} style={{ marginBottom: 24 }}>
										<Card
											className={style.sysBox}
											bodyStyle={{ padding: '24px', height: 150 }}
										>
											<Row>
												<Col span={20} className='name'>{sys.appName}</Col>
												<Col span={4} className='operate-box'>
													<Tooltip placement='top' title='编辑'>
														<Icon type='edit' style={{ fontSize: '22px', paddingTop: '6px' }} onClick={() => { this.onShowEditModel(sys); }} />
													</Tooltip>
												</Col>
											</Row>
											<Row>
												<Col span={24} className='desc'>{sys.appComment}</Col>
											</Row>
										</Card>
									</Col>
								))}
							</Row>

							{/* 菜单 */}
							<Row gutter={24}>
								{[{ appName: 'UCM', appComment: '系统内容' }, { appName: 'ACP', appComment: '系统内容' },].length > 0 && [{ appName: 'UCM', appComment: '系统内容' }, { appName: 'ACP', appComment: '系统内容' },].map((sys, index) => (
									<Col span={6} key={sys.appKey} style={{ marginBottom: 24 }}>
										<Card
											className={style.sysBox}
											bodyStyle={{ padding: '24px', height: 150 }}
										>
											<Row>
												<Col span={20} className='name'>{sys.appName}</Col>
												<Col span={4} className='operate-box'>
													<Tooltip placement='top' title='编辑'>
														<Icon type='edit' style={{ fontSize: '22px', paddingTop: '6px' }} onClick={() => { this.onShowEditModel(sys); }} />
													</Tooltip>
												</Col>
											</Row>
											<Row>
												<Col span={24} className='desc'>{sys.appComment}</Col>
											</Row>
										</Card>
									</Col>
								))}
							</Row>

							<Collapse defaultActiveKey={['1']} >
								<Panel header="出参" key="1">
									<CommonTable
										rowKey="apiId"
										bordered={false}
										selectType={false}
										ref={this.tableRef}
										columns={paramsColumns}
										fetchList={apiList}
										searchParams={{ upperId: selectedNode.id, ...searchParams }}
									/>
								</Panel>
							</Collapse>

						</div>
					</Col>
				</Row>

				{/* 目录、接口弹窗 */}
				{
					['auth', 'sql'].indexOf(modalType) === -1 && (
						<CustomModal
							visible={visible}
							record={record}
							onCancel={this.closeModal}
							onSubmit={this.handleSubmit}
							renderTitle={() => {
								if (modalType === 'folder') {
									return (record && !record.id) ? '新增目录' : '编辑目录';
								}

								if (modalType === 'addApi') {
									return '新增接口';
								}

								if (modalType === 'updateApi') {
									return '编辑接口';
								}
							}}
							renderContent={(formOpts) => (
								<Fragment>
									{modalType === 'folder' && <CustomForm formList={folderForm} {...formOpts} />}
									{(modalType === 'addApi' || modalType === 'updateApi') && <CustomForm formList={interfaceForm(catalogTree)} {...formOpts} />}
								</Fragment>
							)}
						/>
					)
				}

				{/* 授权、SQL弹窗 */}
				<ModalView visible={visible} modalType={modalType} record={record} onCancel={this.closeModal} />
			</Page>
		);
	}
}

export default Form.create()(ModelInterface);

 

hzxOnlineOk
关注
专栏目录
Ant Design Pro 网络请求，视图绑定model并且渲染到页面 umi-request
a_靖的博客
11-20 4578
封装网络请求，在service中新建接口，在model调用service，在视图绑定model并且得到网络请求的回调函数，获取网络请求的数据渲染到页面。 网络请求数据走向； 1.在utils/request.js 封装网络请求； /** * request 网络请求工具 * 更详细的 api 文档: https://github.com/umijs/umi-request */...
react-umi-对接Api.网络请求封装以及Layout布局获取用户信息（动态路由）返回记录路由以及防抖节流睡眠功能实现
echo_Ae的博客
12-19 988
本篇看点 字符串component转成函数component antd4 动态Icon 网络请求封装 Layout布局获取用户信息（动态路由以及动态菜单） 记录路由（返回上一页） 防抖节流睡眠功能实现 app.tsx import React from 'react'; import { history } from 'umi'; import { message } from 'antd'; import qs from 'qs'; import { encode } from 'js-base64'
前端在项目中一般配置utils.ts和request.ts文件
lzfengquan的博客
07-15 2677
我们再src 文件夹下创建一个utils文件夹，来放置我们所有的配置请求文件 然后创建对应的文件 1、 utils.ts文件 的 配置 import { message } from 'antd'; // 引入antd中的全局提示 // 判断是否是IE export function isIE() { const bw = window.navigator.userAgent; const compare = (s) => bw.indexOf(s) >= 0; const ie
006.集成Dva-core到react-native中
黄孝果的博客
04-22 501
安装 yarn add dva-core-ts react-redux yarn add @types/react-redux -D yarn add dva-loading-ts 在models模块下配置 页面所需要的dva数据操作类（例如：home.ts） import { Model, Effect } from 'dva-core-ts' import { Reducer } from 'redux' type HomeState = { num: number } int.
request.js文件中代码解释
最新发布
DX390609的博客
08-06 357
如果为假，则创建一个新的错误并通过 Promise.reject 将其向外传递，这样可以在调用 API 时直接处理这些错误。1.成功的请求：在发送请求前，会先执行这个函数，它接收请求的配置对象 config 作为参数。这段代码使用了 axios 库来创建一个自定义的 HTTP 客户端，并配置了请求拦截器和响应拦截器。最后，导出这个配置好的 axios 实例，这样你就可以在其他文件中引入它，来发送经过预配置的请求。拦截器接受两个函数作为参数：一个是请求成功前执行的函数，一个是请求失败时执行的函数。
使用 Dva 开发复杂 SPA
weixin_43758377的博客
09-25 920
使用 Dva 开发复杂 SPA 到了真实的业务开发过程中，会遇到许许多多不能用那些基本操作覆盖的场景，本文尝试列举一些常见的需求在dva中的实现方式。 动态加载model 有不少业务场景下，我们可能会定义出很多个model，但并不需要在应用启动的时候就全部加载，比较典型的是各类管理控制台。如果每个功能页面是通过路由切换，互相之间没有关系的话，通常会使用webpack的require.ensure来做代码模块的懒加载。 我们也可以利用这个特性来做model的动态加载。 function RouterConfi
Vue 中 import from @ 是什么意思？怎么配置？
y516369的博客
08-13 1976
Vue 中 import from @ 是什么意思？怎么配置？
一篇文带你使用vue完成一个完整后台
热门推荐
CSDN凉宸
05-26 1万+
介绍 vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你 vue-element-admin定位是后台集成方案，不适合当基础模板进行二次开发，项目集成了许多用不到的功能，会造成代码沉余 vue-admin-template是一个后台基础模板，建议使
Dva 中的异步处理（基于React）
0.0 的博客
02-17 1214
Dva 中的异步处理 一、不使用状态机的异步请求 Dva 项目中默认使用 fetch 来发送网络请求。 项目中的 utils 目录中，封装了一个 request.js 文件，该文件中将 fetch 请求封装成了一个 request() 方法。我们发送请求时只需要引入该文件并调用 request() 方法就可以了。 1、封装请求 API 在 Dva 的项目中，还自动创建了一个 services 目录，用来存放项目中所有请求 API 的文件。 例如我们现在需要发送一个“获取待办事项数据”的请求，就可以在 s
请求封装 + Dva 数据流
个人笔记
05-10 344
OK
Dva.js+umi入门案例(models层,services层,components层详细代码与解析)
Zaqenenen的博客
02-24 1565
dva中主要分3层----models,services,components 1. 其中models是最重要概念，这里放的是各种数据，与数据交互的应该都是在这里。 2. services层放请求后台接口的方法。 3. components为组件层。
request使用request使用
06-03
request使用request使用request使用request使用request使用request使用request使用
utils/request.js
01-21
vue使用axios封装工具类utils/request.js
react大数据量渲染_react-big-screen : 一个基于React、Dva、ECharts、DataV的框架大数据可视化（大屏展示）模板。支持数据动态刷新渲染、屏幕适配、数据请求模拟、局...
weixin_39545805的博客
12-20 940
一、项目描述一个基于 React、Dva、DataV、ECharts 框架的 " 数据大屏项目 "。支持数据动态刷新渲染、屏幕适配、数据请求模拟、局部样式、图表自由替换/复用等功能。项目需要全屏展示(按 F11)。项目环境：react^16.2、webpack-4.0、npm-6.13、node-v12.16。请拉取 master 分支的代码，其余是开发分支。友情链接：项目界面图：二、文件目录介绍...
移动端面经项目（3）封装通用组件，利用请求拦截器和响应拦截器处理token，vant-list，渲染页面，yarn build打包（涉及路由懒加载）
weixin_53850394的博客
03-21 551
移动端面经项目（3）封装通用组件，利用请求拦截器和响应拦截器处理token，vant-list，渲染页面，yarn build打包（涉及路由懒加载） 这个移动端的项目写到这里也总算是完成了，其主要还是在于熟悉项目开发时的这一套架子，以便于我们规范化地开发，最后将项目打包。 已经上传至gitee开源远程仓库：https://gitee.com/Scurryniubi/project_mj SSH：git@gitee.com:Scurryniubi/project_mj.git
vue接口调用
huxihua2006的博客
06-10 795
vue接口调用
vue-element-admin框架中axios模块的使用
weixin_43988176的博客
08-09 4496
vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现，帮助我们迅速搭建一个后台的前端页面。本文只介绍其中axios模块的使用，想要更深入的了解请参考官方文档。 框架中请求后台数据的函数在api包下: 初始打开有很多js文件，这是该框架里面自带的，如果你不想用它提供的，你可以自己创建一个js文件，下面是该文件中一个实例内容： import request from '@/utils/request' //更新电影 export function u.
umi3+react+dva 配置request的全局配置(请求拦截与响应拦截)和调用请求
weixin_43845137的博客
10-04 1656
【代码】umi3+react+dva 配置request的全局配置(请求拦截与响应拦截)和调用请求。
vue request 请求接不到参数
Dead_Cicle
05-10 839
import request from '@/utils/request' 导入之后，如果后台 @RequestParam(required = false,value = "userName")String userName 这样接参数，需要前台这样操作： 组装数组对象： queryParams:{ userName:'sx', password:'xx' } 关键是这里： //测试 export function testTemplate(data) { return reque
基于dva对http请求的进一步封装
06-07
我们使用request函数发送网络请求，并在then方法中判断请求是否成功。如果成功，我们会将请求结果返回；如果失败，我们会抛出一个错误。 在使用http函数时，我们可以通过传入options参数来自定义请求配置，例如： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hzxOnlineOk

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值