当前位置：首页 > news >正文

Axios 二次封装

news 2025/7/24 5:55:26

第一步

创建api 初始文件  index.js

import axios from "axios"
// import router from "../router/index"
class Request {// 自定义变量instance;constructor(config) {// 创建axios 实例，变量接收this.instance = axios.create(config);// 添加请求拦截器this.instance.interceptors.request.use((config) => {// config.headers.token = JSON.parse(localStorage.getItem("giant_userdata")).sessionkey;return config;},(error) => {return error;});// 添加相应拦截器this.instance.interceptors.response.use((res) => {if(res.status == 200){if(res.data.code == '503'){this.countDown503()}else{return res;}}},(error) => {return error;});}// 2request(config) {return new Promise((resolve, reject) => {this.instance.request(config).then((res) => {return resolve(res);}).catch((error) => {return reject(error);});});}// 1get(config) {return this.request({...config,method: "GET",});}post(config) {const formData = new FormData()for (const key in config.params) {formData.append(key, config.params[key])}return this.request({data: formData,url: config.url,method: "POST",headers: {'Content-Type': 'multipart/form-data'}});}postblob(config) {  const formData = new FormData()for (const key in config.params) {formData.append(key, config.params[key])}return this.request({data: formData,url: config.url,method: "POST", headers: {'Content-Type': 'application/x-msdownload'},responseType: 'blob'})}// postjson(config) {return this.request({...config,method: "POST",headers: {'Content-Type': 'application/json'}});}// delete(config) {//   return this.request({//     ...config,//     method: "DELETE",//   });// }
}export default Request;

第二部

创建 自定义对应的模块js文件  如： login.js
引入第一步文件js

import { request } from '../config.js'
//  分页
export const flowpages = (params) => {return request.post({url: '/flow/pages',params})
}
//修改
export const flowrupdate = (params) => {return request.postjson({url: '/flow/update',data: JSON.stringify(params)})
}
//后端返回数据流前端处理导出
export const exportflowcasePages = (params) => {return request.postblob( {url: '/export/flow/casePages',params})
}

第三部

引入第二部文件到对应的vue项目

import {exportflowcasePages,flowcasePages,flowpages
} from "@/api/index/index.js"

进行使用

      flowpages(tmpParams).then((res) => {if (res.status == 200) {if (typeof res.data != "object") {res.data = JSON.parse(res.data)}if (res.data.code == 200) {console.log(res.data,'文件信息')} else {_this.$toast(res.data.msg ? res.data.msg : "网络加载失败，请稍后再试")}} else {_this.$toast(res.data.msg ? res.data.msg : "网络加载失败，请稍后再试")}}).catch((err) => {_this.$toast("网络加载失败，请稍后再试")})

此处后端返回数据流导出设置

 exportflowcasePages(tmpParams).then((res) => {if (res.status == 200) {const elink = document.createElement('a')elink.download = '列表.xls'elink.style.display = 'none'const blob = new Blob([res.data], { type: 'application/x-msdownload' })elink.href = URL.createObjectURL(blob)document.body.appendChild(elink)elink.click()document.body.removeChild(elink)} else {_this.$toast(res.data.msg ? res.data.msg : "网络加载失败，请稍后再试")}}).catch((err) => {_this.$toast("网络加载失败，请稍后再试")})