Vue3请求封装 {mtitle title="使用教程"/}配合使用 Vue3接口封装（配合请求封装）{mtitle title="新建一个request.js文件"/}import axios from 'axios' import {getUserInfo} from '@/utils/auth' import errorCode from '@/utils/errorCode' let msgBox: any = null; // 创建axios实例 const service = axios.create({ baseURL: process.env.VUE_APP_API, // 配置的地址 timeout: 30000, // 超时 headers: { 'content-type': 'application/json;charset=utf-8' } }); // request拦截器 // @ts-ignore service.interceptors.request.use(config => { if (getUserInfo() && getUserInfo().token) { // @ts-ignore config.headers.token = getUserInfo().token.toString() // 自定义token } // get请求映射params参数 if (config.method === 'get' && config.params) { let url = config.url + '?'; for (const propName of Object.keys(config.params)) { // @ts-ignore const value = config.params[propName]; let part = encodeURIComponent(propName) + "="; if (value !== null && typeof (value) !== "undefined") { if (typeof value === 'object') { for (const key of Object.keys(value)) { let params = propName + '[' + key + ']'; let subPart = encodeURIComponent(params) + "="; url += subPart + encodeURIComponent(value[key]) + "&"; } } else { url += part + encodeURIComponent(value) + "&"; } } } url = url.slice(0, -1); config.params = {}; config.url = url; } return config }, error => { return Promise.reject(error) }) // 响应拦截器 service.interceptors.response.use(res => { // 未设置状态码则默认成功状态 const code = res.data.code || 200; // 获取错误信息 // @ts-ignore const msg = errorCode[code] || res.data.message || errorCode['default']; if (code === 403) { if (msgBox) return false; // msgBox = ElMessage.error("登录状态已过期，请重新登录！") setTimeout(() => { location.href = '/'; }, 1500) } else if (code === 400) { // ElMessage.error(msg); return res.data; } else if (code !== 200) { // ElMessage.error(msg); return res.data; } else { return res.data } }, error => { // ElMessage.error("服务器连接错误，请联系管理员！") // ElMessage.error(errorCode['default']); return null } ) export default service {mtitle title="新建一个errorCode.js文件"/}// 用于定义一些错误码封装 export default { '401': '认证失败，无法访问系统资源', '403': '当前操作没有权限', '404': '访问资源不存在', 'default': '服务器繁忙，请稍后再试！' } {mtitle title="新建一个request.js文件"/}另一个写的request.js封装/* * @Author: lzx * @Date: 2022-01-11 09:08:05 * @LastEditors: lzx * @LastEditTime: 2022-04-06 15:56:55 * @Description: Fuck Bug * @FilePath: \cs_talk_admin\src\utils\request.js */ import axios from 'axios' import router from '@/router/index' import { message } from '@utils/resetMessage.js' import { ElMessageBox } from 'element-plus' // 数据请求字符 // axios.defaults.baseURL = 'http://192.168.10.254:20000/talk/' // axios.defaults.baseURL = window.g.baseURL axios.defaults.baseURL = process.env.VUE_APP_API // 设置请求超时时长 axios.defaults.timeout = 5000 // 表示跨域请求时是否需要使用凭证 axios.defaults.withCredentials = false // axios.defaults.headers.common['token'] = AUTH_TOKEN axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8' // 允许跨域 axios.defaults.headers.post['Access-Control-Allow-Origin-Type'] = '*' // 请求拦截器 axios.interceptors.request.use( config => { if (config.push === '/user') { } else { if (sessionStorage.getItem('token')) { // 在请求头加入token，名字要和后端接收请求头的token名字一样 config.headers.token = sessionStorage.getItem('token') } } return config }, error => { message.error('接口错误，请联系管理员！') return Promise.reject(error) } ) // 响应拦截器 axios.interceptors.response.use( response => { // 后端返回的状态码 // if (response.data.code === 403 || response.data.code === 110) { // // 清空缓存 // sessionStorage.clear() // message.error('登录已过期，请重新登录！') // console.log(router) // console.log(router.options.history) // console.log(router.options.history.state.current) // // 避免重复跳转,导致控制台红色 // if (router.options.history.state.current !== '/login') { // router.replace('/login') // } // } switch (response.data.code) { case 403 || 110: message.error('登录已过期，请重新登录！') // 清空缓存 sessionStorage.clear() if (router.options.history.state.current !== '/login') { router.replace('/login') } break case 500: message.error(response.data.message) break } return response }, error => { // message.error('服务器繁忙，请联系管理员！') // 清空缓存 // sessionStorage.clear() // // 避免重复跳转,导致控制台红色 // if (router.options.history.state.current !== '/login') { // router.replace('/login') // } ElMessageBox.confirm( '服务器繁忙，请联系管理员！', '错误提示', { confirmButtonText: '退出登录', cancelButtonText: '取消', type: 'warning' } ) .then(() => { message.success('退出登录！') // 清空缓存 sessionStorage.clear() // 避免重复跳转,导致控制台红色 if (router.options.history.state.current !== '/login') { router.replace('/login') } }).catch() return Promise.reject(error) } ) export default axios

Vue3接口封装（配合请求封装） {mtitle title="使用教程"/}配合使用： Vue3请求封装{mtitle title="新建一个api.js"/}/* * @Author: lzx * @Date: 2022-05-09 13:16:58 * @LastEditors: lzx * @LastEditTime: 2022-05-09 15:05:02 * @Description: Fuck Bug * @FilePath: \signature_vue_h5\src\api\api.ts */ import request from '../utils/request' /** * @description 用户登录 * @param {Object} data, **/ export async function Login (data) { return await request({ url: '/loginAdmin', method: 'post', data }) }

Vue简单封装Axios {mtitle title="新建api.js文件"/}/* * @Author: lzx * @Date: 2021-10-12 13:12:08 * @LastEditors: lzx * @LastEditTime: 2021-10-12 14:20:44 * @Description: Fuck Bug * @FilePath: \xsy-auth\src\util\api.js */ // 引入axios import axios from 'axios' // axios.defaults.baseURL = 'http://127.0.0.1:8000' // 设置请求后端的URL地址 axios.defaults.timeout = 2000 // axios请求超时时间 // // 头部携带token axios.defaults.headers.common.token = sessionStorage.getItem('token') // get请求 const get = (url, param) => { return new Promise((resolve, reject) => { axios.get(url, { param }).then(res => { resolve(res.data) }).catch(err => { reject(err.data) }) }) } // put请求 const put = (url, data) => { return new Promise((resolve, reject) => { axios.put(url, data).then(res => { resolve(res.data) }).catch(err => { reject(err.data) }) }) } // delete请求 const del = (url, data) => { return new Promise((resolve, reject) => { axios.delete(url, data).then(res => { resolve(res.data) }).catch(err => { reject(err.data) }) }) } // post请求 const post = (url, data) => { return new Promise((resolve, reject) => { axios.post(url, data).then(res => { resolve(res.data) }).catch(err => { reject(err.data) }) }) } export { get, put, del, post } {mtitle title="main.js中引用"/}// 引入封装的Axios import { get, put, del, post } from './util/api.js' // 使用封装的Axios Vue.prototype.$get = get Vue.prototype.$put = put Vue.prototype.$delete = del Vue.prototype.$post = post{mtitle title="全局页面中使用方式"/}// 1、get请求 thi.$get('url').then(res => { console.log(res.data) }) // 2、put请求 this.$put('url', {有携带 | 没有可以直接如下}).then(res => { console.log(res.data) }) this.$put('url').then(res => { console.log(res.data) }) //this.$delete...如上 //this.$post...如上

简单的Axios封装与使用 简单的Axios封装与使用!