GoFly框架封装Axios数据请求使用说明-CFANZ编程社区

1.引入http请求组件

在使用请求ts文件头部引入如下代码：

import { defHttp } from '@/utils/http';

2.请求方式

2.1 Get请求

适用于获取数据，传递参数简单：类型为数字、布尔类型、数字类型

defHttp.get({ url: Api.getList, params:params }, { errorMessageMode: 'none' });

2.2 Post请求

适用于提交数据，传递参数复杂：类型为数字、布尔类型、数字类型、数组，JSON

defHttp.post({ url: Api.save, params:params}, { errorMessageMode: 'message' });

2.3 Delete请求

适用于删除数据

defHttp.delete({ url: Api.del, params:params}, { errorMessageMode: 'message' });

3.完整示例

文件/api/demo.ts

import { defHttp } from '@/utils/http';
enum Api {
    getList = '/createcode/codecate/get_list',
    getCate = '/createcode/codecate/get_cate',
    save = '/createcode/codecate/save',
    upStatus = '/createcode/codecate/upStatus',
    del = '/createcode/codecate/del',
}

//列表数据
export function getList(params: object) {
  return defHttp.get({ url: Api.getList, params:params }, { errorMessageMode: 'none' });
}
//列表选项数据
export function getCate(params: object) {
    return defHttp.get({ url: Api.getCate, params:params }, { errorMessageMode: 'none' });
  }
//提交数据
export function save(params: object) {
    return defHttp.post({ url: Api.save, params:params}, { errorMessageMode: 'message' });
}
//更新状态
export function upStatus(params: object) {
    return defHttp.post({ url: Api.upStatus, params:params}, { errorMessageMode: 'message' });
}
//删除数据
export function del(params: object) {
    return defHttp.delete({ url: Api.del, params:params}, { errorMessageMode: 'message' });
}
/**数据类型 */
export interface DataItem {
    id:number,
    name: string;
}

4.上传附件

由于附件可能和数据接口服务器分离，所以独立配置域名

import { defHttp } from '@/utils/http';
import { UploadFileParams } from '/#/axios';
//上传文件
export interface UploadItem {
    id: number;
    name: string;
    response: string;
    status: string;
    time: number;
    uid: string;
    url: string;
  }
//获取配置中的上传文件路径
const DOMAIN =import.meta.env.VITE_APP_ENV=="production"? window?.globalConfig.Upinfile_url: window?.globalConfig.Upinfile_url_dev;
export function userUploadApi(
  params: UploadFileParams,
  onUploadProgress?: (progressEvent: any) => void
) {
  return defHttp.uploadFile<UploadItem>({ url:`${DOMAIN}/datacenter/upfile/uploadFile`,onUploadProgress},params);
}

5.api请求配置

参数	描述	类型	默认值
isTransformResponse	返回值是data	boolean	true
errorMessageMode	提示错误类型:none=不提示，modal=modal弹框提示message=message弹框提示 notification=notification弹框提示	string	none
successMessageMode	成功返回提示：none=不提示，modal=modal弹框提示message=message弹框提示	string	none
isReturnNativeResponse	是否返回原生响应头比如：需要获取响应头时使用该属性	boolean	false
isTransformResponse	用于页面代码可能需要直接获取code，data，message这些信息时开启，直接返回code，data，message是设置为false	boolean	true
timeout	请求超时	number	10秒
isRootUrl	是否添加接口地址	false时添加自己请求域名	true

6.开发规范

框架约定api接口请求方法现在/src/api文件内，根据模块再建一层文件夹，例如数据中心下的字典数据（datacenter/dictionary）为：/src/api/datacenter/dictionary.ts

然后再vue业务文件内引入如下

import { getList,upStatus,del} from '@/api/datacenter/dictionary';

实例请如下：

const data= await getList({});