安裝如下

npm install axios

第一步：創(chuàng)建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}`);},
};

第四步：引入在單頁面使用（根據組件化開發(fā)模式不需要全局注冊，只需要在需要的地方引用就可以了）

以下為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