首页
壁纸
直播
留言
关于
友链
统计
Search
1
tampermonkey油猴和谷歌访问助手的安装---破解谷歌访问助手
13,642 阅读
2
安装postcss-px-to-viewport,将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件(有更新postcss弃用,附带vite.config.ts文件)
3,211 阅读
3
编译asar文件与electron反编译
3,177 阅读
4
websocket封装带心跳和重连机制(vue3+ts+vite)
2,782 阅读
5
js一些小功能(持续更新)
2,442 阅读
大前端
JavaScript
CSS
HTML
框架
Vue
electron
element-ui/plus
小程序
微信小程序
uni-app
服务端
Node.js
nginx
PHP
MySQL
工具
杂记
登录
Search
标签搜索
Vue3
Vue
Axios
微信小程序
Javascript
Vuex
js
请求
request
前端
tampermonkey
Google
助手
脚本
小程序云开发
Bootstrap
壁纸
鼠标事件
跨域
css
大祥子i
累计撰写
55
篇文章
累计收到
128
条评论
首页
栏目
大前端
JavaScript
CSS
HTML
框架
Vue
electron
element-ui/plus
小程序
微信小程序
uni-app
服务端
Node.js
nginx
PHP
MySQL
工具
杂记
页面
壁纸
直播
留言
关于
友链
统计
搜索到
4
篇与
Axios
的结果
2021-11-17
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
2021年11月17日
316 阅读
0 评论
0 点赞
2021-11-14
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 }) }
2021年11月14日
475 阅读
0 评论
41 点赞
2021-10-12
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...如上
2021年10月12日
159 阅读
0 评论
0 点赞
2020-07-28
简单的Axios封装与使用
简单的Axios封装与使用!
2020年07月28日
237 阅读
0 评论
0 点赞