axios -- 请求封装request.js
import axios from 'axios'; import qs from 'qs'; import { delCookie, getCookie, setCookie } from "../utils/index.js"; import { Message, Loading } from 'element-ui'; import router from '../router/index' import _this from "@/main.js" //设置超时时间 axios.defaults.timeout = 15000; //设置全局的请求次数,请求的间隙 axios.defaults.retry = 4; axios.defaults.retryDelay = 1000; axios.defaults.baseURL = process.env.VUE_APP_BASEURL; const currContentType = { urlencoded: "application/x-www-form-urlencoded;charset=utf-8", fromData: "ipart/form-data;charset=utf-8", json: "application/json;charset=utf-8", xml: "text/xml;charset=utf-8", form: "multipart/form-data;charset=utf-8" }; axios.interceptors.request.use( config => { let contentType; let token = getCookie("apToken") if (config.contentType) { contentType = currContentType[config.contentType] } else { contentType = currContentType["urlencoded"] } if (config.contentType == "json") { if (config.params) { config.params.token = token } else { let params = { token: token } config.params = params } config.data = JSON.stringify(config.data) }else if(config.contentType == "form"){ config.data.append('token',token) } else { if (config.method == "get") { if (config.params) { config.params.token = token } else { let params = { token: token } config.params = params } } else { if (config.data) { config.data.token = token; } } config.data = qs.stringify(config.data); } config.headers = { 'Content-Type': contentType, // 'TK_REQUEST_SYS_CODE': 'HISXL', // 'TK_REQUEST_AUTH_CODE': 'HISXL-001', // 'Accept': 'application/json', // 'Accept-Charset': 'utf-8', // 'Content-Type': 'application/json;charset=UTF-8', } return config; }, error => { return Promise.reject(error); } ); //添加响应之后拦截器 axios.interceptors.response.use(function (response) { //对响应数据做些事 if(response.status && response.status != 200){ return Promise.reject() } let code = response.data.code; if (code == 200 || code == 2000) { return response; } else if (code == 2003) { if (response.config.showError) { Message.error(response.data.msg); } setCookie('apToken', '') router.push({ path: "/login" }); } else { if (response.config.showError) { if(response.data && response.data.msg){ Message.error(response.data.msg); }else{ Message.error("服务器错误"); } } } return response; }, function (error) { //请求错误时做些事 return Promise.reject(error); }); /** * 封装get方法 * @param url * @param data * @returns {Promise} */ export function get(url, params = {}, { showError = true, contentType = "urlencoded" } = {}) { let config = { showError: showError, contentType: contentType } return new Promise((resolve, reject) => { axios.get(url, { params: params, ...config }).then(response => { if (response.data.code == 2000 || response.data.code == 200) { return resolve(response.data.data); } else { if(response){ return reject(response) }else{ return reject(null) } } }).catch(err => { if(response.data.code == 2021){ if (config.showError) { Message.error("无访问权限,请尝试重新登录"); } }else{ if (config.showError) { Message.error("服务器错误"); } } return reject(err) }) }) } /** * 封装post请求 * @param url * @param data * @returns {Promise} */ export function post(url, data = {}, { showError = true, contentType = "urlencoded" } = {}) { //追加全局参数 // data.token = getCookie('apToken'); let config = { showError: showError, contentType: contentType } return new Promise((resolve, reject) => { axios.post(url, data, config).then(response => { if (response.data.code == 2000 || response.data.code == 200) { return resolve(response.data.data); } else { if(response.data){ return reject(response.data) }else{ return reject(null) } } }).catch(err => { if (config.showError) { Message.error("服务器错误"); } return reject(err) }) }) } export function getResponse(url, data, options) { return new Promise((resolve, reject) => { get(url, data, options).then(res => { return resolve(res) }).catch(err => { return reject(err) }) }) } export function postResponse(url, data, options) { return new Promise((resolve, reject) => { post(url, data, options).then(res => { return resolve(res) }).catch(err => { return reject(err) }) }) }
应用 公共js 先定义请求路径 :
import { post, get ,getResponse,postResponse} from './request.js' //post export function getStockInList(data){ let url = "请求路径"; return postResponse(url,data) } // get export function getStockInDetail(data){ let url = "xxx"; return getResponse(url,data) } //错误信息不显示 export function createStockInAuto(data){ let url = "xxx"; return postResponse(url,data,{showError:false}) } //json 格式传参 export function setEnable(data){ let url = 'xxx'; return postResponse(url,data,{contentType:'json'}) } // form 格式传参 export function fileUpload(data){ let url = 'xxx'; return postResponse(url,data,{contentType:'form'}) }
页面上引入上面方法:
import { getStockInList } from "../../../api/apiStock"; //方法调用 getData() { let params = { pageNo: this.cur_page, pageSize: this.pageSize, applyCode: this.applyCode, state: this.state, settlementOrgId: this.settlementOrgIds.slice(-1).toString(), createdByName: this.createdByName, startDate: this.time[0], endDate: this.time[1], templateType: this.templateType, templateCode: this.templateCode, templateName: this.templateName, officeId:this.officeId }; getStockInList(params).then((res) => { this.tableData = res.records; this.total = res.total; this.cur_page = res.current; this.pageSize = res.size; }); },
以上。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本