Vue3+TypeScript二次封装axios

安装如下

npm install axios

第一步：创建config配置文件，用于存放请求后端的ip地址，用于后期打包后便于修改ip地址。

注：typescript要求参数要有类型。（ES6 定义对象 属性 类型 修改的是属性的值）

interface Config {getCookieExpires(): number;getBaseIP(): string;getBaseUrl(): string;getSQLServerBaseUrl(): string;
}const config: Config = {getCookieExpires() {return 5;},getBaseIP() {const developmentIP = "";return developmentIP;},getBaseUrl() {const developmentUrl = `http://${this.getBaseIP()}:8580/edu_examandmanage_back`;return developmentUrl;},getSQLServerBaseUrl() {const developmentSQLServerUrl = `http://${this.getBaseIP()}:9191/edu_examandmanage_back`;return developmentSQLServerUrl;},
};export default config;

 

第二步：封装axios于http文件中

注：{ type AxiosInstance, type AxiosResponse }要用type

import axios, { type AxiosInstance, type AxiosResponse } from "axios"
import config from '@/config';const http:AxiosInstance = axios.create({baseURL: config.getBaseUrl(),timeout: 30000, // 请求超时时间headers: {'Content-Type': 'application/json'}
});// 请求拦截器
http.interceptors.request.use((config) => {const token = sessionStorage.getItem('token');if (token) {config.headers.Authorization = `Bearer ${token}`;}return config;},(error) => Promise.reject(error)
);// 响应拦截器
http.interceptors.response.use((response) => response,(error) => {if (error.response?.status === 403) {// 处理权限错误}return Promise.reject(error);}
);export default http;

第三步：调用http实现get、post、delete、put方法

// 公共请求
import http from 'src/lib/http'export const ProcessApi = {// 根据ID获取仪器进度GetInstrumentProgressById(id:number) {return http.get(`/api/progress/getInstrumentProgressById?id=${id}`);},// 根据UserName获取仪器进度getInstrumentProgressByUserNumber(user_number:number) {return http.get(`/api/progress/getInstrumentProgressByUserNumber?user_number=${user_number}`);},
};

第四步：引入在单页面使用（根据组件化开发模式不需要全局注册，只需要在需要的地方引用就可以了）

以下为vue2+JavaScript版本

config.js

//全局配置信息
const config =  {//token在Cookie中存储的天数，默认7天getCookieExpires(){return 5;},getBaseIP(){const developmentIP = "";return developmentIP;},getBaseUrl(){const developmentUrl = "http://" + this.getBaseIP() + ":8580/edu_examandmanage_back";// const developmentUrl = "http://localhost:8580/edu_examandmanage_back";return developmentUrl;},getSQLServerBaseUrl(){const developmentSQLServerUrl = "http://" + this.getBaseIP() + ":9191/edu_examandmanage_back";// const developmentUrl = "http://localhost:9191/edu_examandmanage_back";return developmentSQLServerUrl;},};export default config;

http.js

import axios from 'axios';
import config from '../config';
import Vue from 'vue';// Create an Axios instance
const http = axios.create({timeout: 30000, // Request timeoutbaseURL: config.getBaseUrl(),headers: {'Content-Type': 'application/json;charset=UTF-8',},
});// Add a request interceptor
http.interceptors.request.use((config) => {// Get the token from localStorageconst token = sessionStorage.getItem('token');// If the token exists, add it to the Authorization headerif (token) {config.headers.Authorization = `Bearer ${token}`;}return config;},(error) => {return Promise.reject(error);}
);// Add a response interceptor
http.interceptors.response.use((response) => {return response;},(error) => {// Check if the error response status is 403if (error.response && error.response.status === 403) {// Use Vuesax to display a notificationVue.prototype.$vs.notification({title: '权限错误',text: '请叫管理员开通权限。',color: 'danger', // Set the notification colorposition: 'top-center',duration: 4000, // Duration in milliseconds});}return Promise.reject(error);}
);export default http;

 ExamApi.js

// 公共请求
import http from '@/lib/http';
export const ExamApi = {UserNeedExamByUserNumber(UserNumber){return http.get('/exam/UserNeedExamByUserNumber', { params: { UserNumber } });},SelectAllQustionByPaperIdUpdate(PaperId){return http.get('/exam/SelectAllQustionByPaperIdUpdate', { params: { PaperId } });},insertRecordFromStartExam(data) {return http.post('/exam/insertRecordFromStartExam', JSON.stringify(data));},insertUserAnswerAndSubmitExamToAddScore(data) {return http.post('/exam/insertUserAnswerAndSubmitExamToAddScore', JSON.stringify(data));},SelectAllQustionFromStore(QuestionId){return http.get('/exam/SelectAllQustionFromStore', { params: { QuestionId } });},addQuestions(data) {return http.post('/exam/addQuestions', JSON.stringify(data));},getUserAnswers(id){return http.get('/exam/RecordAllExamInfoById', { params: { id } });},delteRecordByClassName(classname){return http.post('/exam/delteRecordByClassName', classname);},SelectAllExamInfoByUserNumber(ExamUserNumber){return http.get('/exam/SelectAllExamInfoByUserNumber', { params: { ExamUserNumber } });},SelectAllExamInfo(){return http.get('/exam/SelectAllExamInfo');},DeleteQustionByQuestionId(QuestionId){return http.get('/exam/DeleteQustionByQuestionId', { params: { QuestionId } });},//组卷模块GetAllPaperInfo(){return http.get('/exam/GetAllPaperInfo');},DeleteAnPaper(paperId){return http.get('/exam/DeleteAnPaper', { params: { paperId } });},GenerateAnPaperController(data) {return http.post('/exam/GenerateAnPaperController', JSON.stringify(data));},deleteImageFile(ImageName) {return http.delete("/upload/deleteImageFile", {params: {ImageName: ImageName}});}
}

main.js