第70讲axios后端请求工具类封装

axios工具类封装:

// 引入axios
import axios from 'axios';

// 创建axios实例
const httpService = axios.create({
  // url前缀-'http:xxx.xxx'
  // baseURL: process.env.BASE_API, // 需自定义
  baseURL:'http://localhost:80/',
  // 请求超时时间
  timeout: 3000 // 需自定义
});

//添加请求和响应拦截器
// 添加请求拦截器
httpService.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  config.headers.token=window.sessionStorage.getItem('token');
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
httpService.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

/*网络请求部分*/

/*
 *  get请求
 *  url:请求地址
 *  params:参数
 * */
export function get(url, params = {}) {
  return new Promise((resolve, reject) => {
    httpService({
      url: url,
      method: 'get',
      params: params
    }).then(response => {
      resolve(response);
    }).catch(error => {
      reject(error);
    });
  });
}

/*
 *  post请求
 *  url:请求地址
 *  params:参数
 * */
export function post(url, params = {}) {
  return new Promise((resolve, reject) => {
    httpService({
      url: url,
      method: 'post',
      data: params
    }).then(response => {
      console.log(response)
      resolve(response);
    }).catch(error => {
      console.log(error)
      reject(error);
    });
  });
}

/*
 *  文件上传
 *  url:请求地址
 *  params:参数
 * */
export function fileUpload(url, params = {}) {
  return new Promise((resolve, reject) => {
    httpService({
      url: url,
      method: 'post',
      data: params,
      headers: { 'Content-Type': 'multipart/form-data' }
    }).then(response => {
      resolve(response);
    }).catch(error => {
      reject(error);
    });
  });
}

export default {
  get,
  post,
  fileUpload
}

配置@作为根目录

vue.config.js里面配置:

  configureWebpack:{
      resolve:{
          alias:{
              '@':resolve('src')
          }
      }
  },

在这里插入图片描述
导入axios工具类;

import axiosUtil from '@/util/axios'

改下:

try{
        let result=await axiosUtil.post("adminLogin",form.value);
        let data=result.data;
        if(data.code==0){
          ElMessage.success("登录成功");
          window.sessionStorage.setItem("token",data.token);
        }else{
          ElMessage.error(data.msg);
        }
      }catch(err){
        console.log("error:"+err);
        ElMessage.error("系统运行出错,请联系管理员");
      }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/382240.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

gem5学习(19):gem5内存系统——The gem5 Memory System

目录 一、Model Hierarchy 二、CPU 三、Data Cache Object 四、Tags & Data Block 五、MSHR and Write Buffer Queues 六、Memory Access Ordering 七、Coherent Bus Object 八、Simple Memory Object 九、Message Flow 1、Memory Access Ordering(re…

C++模版(初阶)

🌈函数复用的两种不恰当方式 ☀️1.函数重载 以Swap函数为例,有多少种参数类型组合,就要重载多少个函数: void Swap(int& left, int& right) {int temp left;left right;right temp; } void Swap(double& left,…

ChatGPT高效提问—prompt常见用法(续篇十一)

ChatGPT高效提问—prompt常见用法(续篇十一) 1.1 增加角色 ​ 在prompt里可以适当增加角色,来满足一些特殊场景的需求。先来看一个不带角色的简单示例。 输入prompt: ​ ChatGPT输出: ​ 如上所示,问题比较难,ChatGPT的答案也确实晦涩难懂。试想一下,如果将这个解释将…

fast.ai 深度学习笔记(四)

深度学习 2:第 2 部分第 8 课 原文:medium.com/hiromi_suenaga/deep-learning-2-part-2-lesson-8-5ae195c49493 译者:飞龙 协议:CC BY-NC-SA 4.0 来自 fast.ai 课程的个人笔记。随着我继续复习课程以“真正”理解它,这…

【深度学习】:实验6布置,图像自然语言描述生成(让计算机“看图说话”)

清华大学驭风计划 因为篇幅原因实验答案分开上传,深度学习专栏持续更新中,期待的小伙伴敬请关注 实验答案链接http://t.csdnimg.cn/bA48U 有任何疑问或者问题,也欢迎私信博主,大家可以相互讨论交流哟~~ 案例 6 :图像自…

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Web组件

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Web组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、Web组件 提供具有网页显示能力的Web组件,ohos.web.webview提供web控制能…

网络的基本概念和socket编程

网络的基本概念 1.协议1.1 协议的基本概念1.2 常见的协议 2.分层模型2.1网络七层OSI 7层模型:物数网传会表应(口诀)2.2TCP/IP模型2.3数据通信的过程2.4网络的设计模式2.5以太网帧的格式 3.SOCKET编程3.1网络字节序3.2 相关结构体和函数3.3 代码实现 1.协议 1.1 协议…

2.9日学习打卡----初学RabbitMQ(四)

2.9日学习打卡 一.RabbitMQ 死信队列 在MQ中,当消息成为死信(Dead message)后,消息中间件可以将其从当前队列发送到另一个队列中,这个队列就是死信队列。而在RabbitMQ中,由于有交换机的概念,实…

《CSS 简易速速上手小册》第8章:CSS 性能优化和可访问性(2024 最新版)

文章目录 8.1 CSS 文件的组织和管理8.1.1 基础知识8.1.2 重点案例:项目样式表结构8.1.3 拓展案例 1:使用BEM命名规范8.1.4 拓展案例 2:利用 Sass 混入创建响应式工具类 8.2 提高网页加载速度的技巧8.2.1 基础知识8.2.2 重点案例:图…

MySQL-视图(VIEW)

文章目录 1. 什么是视图?2. 视图 VS 数据表3. 视图的优点4. 视图相关语法4.1 创建视图4.2 查看视图4.3 修改视图4.4 删除视图4.5 检查选项 5. 案例6. 注意事项 1. 什么是视图? MySQL 视图( View)是一种虚拟存在的表,同…

论文笔记:相似感知的多模态假新闻检测

整理了RecSys2020 Progressive Layered Extraction : A Novel Multi-Task Learning Model for Personalized Recommendations)论文的阅读笔记 背景模型实验 论文地址:SAFE 背景 在此之前,对利用新闻文章中文本信息和视觉信息之间的关系(相似…

Java并发基础:LinkedBlockingQueue全面解析!

内容概要 LinkedBlockingQueue类是以链表结构实现高效线程安全队列,具有出色的并发性能、灵活的阻塞与非阻塞操作,以及适用于生产者和消费者模式的能力,此外,LinkedBlockingQueue还具有高度的可伸缩性,能够在多线程环…

剑指offer——替换空格

目录 1. 题目描述与背景1.1 题目描述1.2 背景 2. 一般思路 (时间复杂度为O(n))3. 分析4. 完整代码4.1 标准答案 1. 题目描述与背景 1.1 题目描述 请实现一个函数,把字符串中的每个空格替换成 “ %20 ” 。例如:输入“ we are hap…

【Linux】学习-动静态库

动静态库 头文件与库的区别 头文件一般而言,是声明和宏定义。头文件是在预处理阶段使用的 库文件是已经编译好的二进制代码。是一种目标文件,库文件是在链接阶段使用的 对于头文件和库我们可以这样理解,就是头文件提供的是一个函数的声明&…

【5G NR】【一文读懂系列】移动通讯中使用的信道编解码技术-Turbo编码原理

目录 Turbo码:无线通信中的革命性技术 引言 一、Turbo码的基本原理 1.1 卷积码基础: 1.2 Turbo码的构造: 1.2.1 分量编码器 1.2.2 随机交织器 1.2.3 穿刺和复接单元 1.3 编码器结构的重要性和影响 1.4 迭代解码: 1.4.1 …

C#使用RabbitMQ-5_主题模式(主题交换机)

简介 主题模式允许发送者根据主题发布消息,而订阅者可以订阅特定的主题。 在主题模式中,生产者发送的消息被发送到一个交换机(Exchange),该交换机根据消息的路由键(Routing Key)和绑定&#x…

springcloud分布式架构网上商城源码和论文

首先,论文一开始便是清楚的论述了系统的研究内容。其次,剖析系统需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确系统的需求。然后在明白了系统的需求基础上需要进一步地设计系统,主要包罗软件架构模式、整体功能模块、数据库设计。本项…

React18原理: Fiber架构下的单线程CPU调度策略

概述 React 的 Fiber 架构, 它的整个设计思想就是去参考CPU的调度策略CPU现在都是多核多进程的,重点研究的是 CPU是单核单线程,它是如何调度的?为什么要去研究单线程的CPU? 浏览器中的JS它是单线程的JS 的执行线程和浏览器的渲染GUI 是互斥…

小兔鲜项目网页版

头部模块 <!-- 头部模块 --><header><!-- 快捷菜单模块 --><div class"xtx-shortcut"><!-- 版心的盒子 --><nav class"container"><ul class"fr"><li><a href"#">请先登录<…

前端JavaScript篇之对象继承的方式有哪些?

目录 对象继承的方式有哪些&#xff1f;1. 原型链继承2. 借用构造函数3. 组合继承4. 原型式继承5. 寄生式组合继承 对象继承的方式有哪些&#xff1f; 1. 原型链继承 当使用原型链继承时&#xff0c;子类型的原型对象被设置为父类型的一个实例。这意味着子类型通过其原型可以…