1.下载安装axios
$ npm install axios
2.建立axios.ts
import axios, {AxiosInstance, AxiosRequestConfig, AxiosPromise, AxiosResponse} from 'axios'; // 引入axios和定义在node_modules/axios/index.ts文件里的类型声明import store from '../store'import router from '../router'import {getToken, getAuthorization} from './auth'// 使用.env.development里面定义的apiconst apiBaseUrl = import.meta.env.VITE_APP_WARN_EASYMOCK_URL;class HttpRequest { // 定义一个接口请求类，用于创建一个axios请求实例 constructor(public baseUrl: any = apiBaseUrl) { // 这个类接收一个字符串参数，是接口请求的基本路径 this.baseUrl = baseUrl; } public request(options: AxiosRequestConfig): AxiosPromise { // 我们实际调用接口的时候调用实例的这个方法，他返回一个AxiosPromise const instance: AxiosInstance = axios.create() // 这里使用axios.create方法创建一个axios实例，他是一个函数，同时这个函数包含多个属性 options = this.mergeConfig(options) // 合并基础路径和每个接口单独传入的配置，比如url、参数等 this.interceptors(instance, options.url) // 调用interceptors方法使拦截器生效 return instance(options) // 最后返回AxiosPromise } private interceptors(instance: AxiosInstance, url?: string) { // 定义这个函数用于添加全局请求和响应拦截逻辑 // 在这里添加请求和响应拦截 instance.interceptors.request.use((config: AxiosRequestConfig) => { // 接口请求的所有配置，都在这个config对象中，他的类型是AxiosRequestConfig，你可以看到他有哪些字段 // 如果你要修改接口请求配置，需要修改 axios.defaults 上的字段值 config.headers['X-Token'] = getToken(); config.headers['Authorization'] = getAuthorization(); return config },(error) => { return Promise.reject(error); }); instance.interceptors.response.use((res: AxiosResponse) => { const {data} = res // res的类型是AxiosResponse，包含六个字段，其中data是服务端返回的数据 const {status, msg} = data // 通常服务端会将响应状态码、提示信息、数据等放到返回的数据中 if (res.status !== 200) { return Promise.reject('error') } else { if (data === 'token失败' && res.status === 200) { let patharr=window.location.href.split("/") let patharrtwo =patharr[patharr.length-1].split("?") if(patharrtwo.indexOf('login')==-1){ let redirectUrl = router.currentRoute.value.path == '/' ? location.href + "login" : location.href.replace(router.currentRoute.value.path , "/login") window.location.href = redirectUrl } } else { if (status !== '1') { // 这里我们在服务端将正确返回的状态码标为0 console.error(msg) // 如果不是0，则打印错误信息，我们后面讲到UI组件的时候，这里可以使用消息窗提示 } return data } // return data } },(error) => { // 这里是遇到报错的回调 return Promise.reject(error); }); } private mergeConfig(options: AxiosRequestConfig): AxiosRequestConfig { // 这个方法用于合并基础路径配置和接口单独配置 return Object.assign({baseURL: this.baseUrl}, options); }}// 用于定义接口返回的数据类型export interface ResponseData { status: string data?: any msg: string}export default HttpRequest;
3.request.ts
import HttpRequest from './axios'export * from './axios'export default new HttpRequest();
4.接口封装api
// src/api/user.tsimport axios, { ResponseData } from "../../axios/request";import { AxiosPromise } from "axios";// 通知、约稿、核报 的所有接口 都采用通知的接口// 获取上级通知列表export const messageSave = (data: { title: string; // 是 信息标题 content: string; // 是 信息内容 type: number; // 是 消息类型(1通知2核报3约稿) fbEndtime: string; // 否 反馈截止时间 needFb: number; // 否 是否需要反馈 fileList: any[]; // 是 附件列表 fileName文件名称,fileUrl地址 receiveList: any[]; // 是 接收列表receiverId接收部门id receiverName接收部门名称}) => { return axios.request({ url: "api/comm/message/save", method: "post", data, });};// 获取上级通知列表export const getMessagePageUp = (data: Object) => { return axios.request({ url: "api/comm/message/page", method: "post", data, });};
5.组件使用接口 messageSave接口
const saveModal = async () => { if( transmissionValue.value.UseFormData.modalType === 'addInform' ){ console.log('当前是添加通知确定事件'); await formValidateFun(async ()=>{ try { // 设置参数----------------------------start const receiveList = (transmissionValue.value.UseFormData.formData.warnDeptList||[]).map((x:{deptId:number;deptName:string;})=> { return { receiverId: x.deptId, receiverName: x.deptName, } }) const params: any = { title: transmissionValue.value.UseFormData.formData.informTitle, content: transmissionValue.value.UseFormData.formData.informContent, type: 1, fileList: transmissionValue.value.UseFormData.formData.fileList, receiveList: receiveList, }; if( transmissionValue.value.UseFormData.formData.isFeedBack){ params['needFb'] = Number(transmissionValue.value.UseFormData.formData.isFeedBack) } if(transmissionValue.value.UseFormData.formData.feedbackEndTime){ params['fbEndtime'] = transmissionValue.value.UseFormData.formData.feedbackEndTime } // 设置参数----------------------------end const res: any = await messageSave(params) if (res.status == 200 || res.status == 1) { message.success('新增成功!'); loadTableData(); // 关闭弹框 }else { message.warn(res.msg) } modelStatus.value = false; } catch (e:any) { console.log(e); } }) return; } if( transmissionValue.value.UseFormData.modalType === 'lookfeedbackup' ){ showInformDetails(saveLookInformDetails); return; } modelStatus.value = false; };
