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

vue+axios常用操作

vue+axios常用操作

  • vue2+axios请求拦截
    • 依赖项
    • http.js
  • vue2+axios设置请求头
    • 依赖项
    • http.js
    • 获取并设置请求头
      • api.js
      • a.vue

vue2+axios请求拦截

依赖项

“vue”: “^2.6.11”
“axios”: “^0.21.0”
“element-ui”: “^2.13.2”(做弹窗提示,可以不用)

http.js

// 引入axios以及element ui中的loading和message组件
import axios from 'axios'
import {Loading,Message
} from 'element-ui'
import router from '../../router/index'
// 超时时间
axios.defaults.timeout = 5000// http请求拦截器
var loadinginstace
axios.interceptors.request.use(config => {// element ui Loading方法loadinginstace = Loading.service({fullscreen: true})return config
}, error => {loadinginstace.close()Message.error({message: '加载超时'})return Promise.reject(error)
})
// http响应拦截器
axios.interceptors.response.use(data => { // 响应成功关闭loadingloadinginstace.close()const code = data.data.code;if (code == 401) {Message.closeAll()router.push('/')sessionStorage.removeItem('author')return data;}return data;
}, error => {loadinginstace.close()if (error.toString().indexOf('timeout')) {error = '请求超时!'}return Promise.reject(error)
})export default axios

vue2+axios设置请求头

依赖项

“vue”: “^2.6.11”
“axios”: “^0.21.0”
“element-ui”: “^2.13.2”(做弹窗提示,可以不用)

http.js

// 引入axios以及element ui中的loading和message组件
import axios from 'axios'
if (sessionStorage.getItem("author")) {axios.defaults.headers.common["Authorization"] = sessionStorage.getItem("author");
}
// 超时时间
axios.defaults.timeout = 5000
axios.defaults.withCredentials = trueexport default axios

获取并设置请求头

api.js

import axios from '../assets/js/http'
const IP = "http://xxxx:xx" // test/*** 登录* @returns */
export function rpc_login(username,password
) {return axios.post(IP + "/auth/login", {username,password,}, {transformRequest: [function (data, headers) {if (headers.common.Authorization) {delete headers.common.Authorization;}return JSON.stringify(data);}],headers: {"Content-Type": "application/json"}})
}

a.vue

rpc_login(this.username, this.password).then((res) => {if (res.data.code == "200") {axios.defaults.headers.common["Authorization"] = res.data.data;sessionStorage.setItem("author", res.data.data);this.$router.push("/home");} else {this.$message.error(res.data.msg);}}).catch((err) => {this.$message.error(err.toString());});
http://www.lryc.cn/news/8790.html

相关文章:

  • Xshell连接阿里云服务器搭建网站
  • 嵌入式ARM设计编程(三) 处理器工作模式
  • jenkins构建报错:.java:16: error: package javafx.util does not exist
  • 【第三天】策略模式
  • 以应用为导向,看声纹识别中的音频伪造问题
  • RocketMQ源码分析之CommitLog消息存储机制
  • 亿级高并发电商项目-- 实战篇 --万达商城项目 九(广告服务、安装Redis优化用户缓存、广告服务实现类等开发)
  • FreeMarker生成word文档,固定word模板
  • 前端必学的CSS制作Switch动画开关按钮演示
  • C语言运算符(左值右值,基本运算符)
  • 【自学Python】一文读懂Python字符串是否是数字
  • 【PTA Advanced】1146 Topological Order(C++)
  • 基于stm32mp157的嵌入式linux+qt项目实战物联网毕业设计选题之智慧医疗项目
  • Java实现邮件发送功能
  • springboot+vue简单对接支付宝完整流程
  • Map 查找表
  • python--石头剪刀布游戏(列表)
  • Project Caliper:目标是打造最佳VR手柄
  • 自动驾驶:BEV开山之作LSS(lift,splat,shoot)原理代码串讲
  • C# 如何实现对“属性”的扩展
  • EBS 物料属性 先后台对应关系 MTL_SYSTEM_ITEMS_B
  • MYSQL数据库-主从复制(原理及搭建)
  • 3GPP-NR Band25标准定义频点和信道(3GPP V17.7.0 (2022-12))
  • 微信小程序 之 原生开发
  • 常用vim命令和vim基本使用及Linux用户的管理,用户和组相关文件
  • 阿里云服务器部署前后端分离项目
  • 内核经典数据结构list 剖析
  • 华为OD机试 - 考优选核酸检测点(Python)| 真题+思路+考点+代码+岗位
  • 在魔改PLUS-F5280开发板上使用合封qsp iflash
  • uni-app 瀑布流