Axios 封装

请注意以下文件夹:

utils下的setToken.js  是token封装(封装 Token-CSDN博客),service.js 是axios封装。

Axios封装:

1.安装axios
在项目终端下 输入:

npm install axios --save

2.在main.js全局引入axios

import axios from 'axios'Vue.prototype.$axios =axios   //挂载到原型,可以在全局使用

3.在service.js  写入以下内容:

import axios from "axios";
import {getToken} from '@/utils/setToken.js'
import {Message} from 'element-ui'const service = axios.create({baseURL:'/api' , // baseURL 会自动加在请求地址上timeout: 300
})export async function request(method,url,headers, params,data){headers=headers||{};headers["token"] = getToken('token')return await new Promise((resolve, reject) => {service({url,method,params,data,headers}).then(res => {const resData=res.dataresData.message=resData.message||'响应成功'; // log('request',method,url,headers, params,data,resData);if(resData.code === 200) {resolve(resData);//  表格数据转换 }else{Message({message:resData.message, type:'warning'})reject(new Error(resData.message))}}).catch(err => {log('request',method,url,headers, params,data,err);Message({message: '响应失败' , type:'warning'})reject(err)})} )
}/*** 发送GET请求* @param {String} url  请求地址* @param {Object} params 请求参数* @returns */
export function  get(url, params){ return request('get',url,{},params);
}
/*** 发送POST请求,没有报文体* @param {*} url 请求地址* @param {*} params 请求URL参数* @returns */
export function post(url, params){ return request('post',url,{},params);
}
/*** 发送POST请求,发送JSON报文体* @param {*} url 请求地址* @param {*} params 请求URL参数* @param {*} data 请求body参数* @returns */
export function postJSON(url, params,data){ return request('post',url,{'Content-Type': 'application/json;charset=UTF-8'},params,data);
}
/*** 送POST请求,发送From表单报文体* @param {*} url 请求地址* @param {*} params 请求URL参数* @param {*} data 请求body参数* @returns */
export function postFrom(url, params,data){ return request('post',url,{'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},params,data);
}
/*** 发送POST请求,发送FromData报文体,上传文件可用* @param {*} url 请求地址* @param {*} params 请求URL参数* @param {*} data 请求body参数* @returns */
export function postFromData(url, params,data){ var fromDate=new FormData();for(var key in data){fromDate.append(key,data[key]);}return request('post',url,{'Content-Type': 'multipart/form-data'},params,fromDate);
}
/*** 发送delete请求* @param {*} url 请求地址* @param {*} params 请求URL参数* @returns */
export async function del(url, params){ return request('delete',url,{},params);
}
/*** 发送PUT请求,没有报文体* @param {*} url 请求地址* @param {*} params 请求URL参数* @returns */
export function put(url, params){ return request('put',url,{},params);
}/*** 发送PUT请求,发送JSON报文体* @param {*} url 请求地址* @param {*} params 请求URL参数* @param {*} data 请求body参数* @returns */
export function putJSON(url, params,data){ return request('put',url,{'Content-Type': 'application/json;charset=UTF-8'},params,data);
}/*** 送PUT请求,发送From表单报文体* @param {*} url 请求地址* @param {*} params 请求URL参数* @param {*} data 请求body参数* @returns */
export function putFrom(url, params,data){ return request('put',url,{'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},params,data);
}/*** 发送PUT请求,发送FromData报文体,上传文件可用* @param {*} url 请求地址* @param {*} params 请求URL参数* @param {*} data 请求body参数* @returns */
export function putFromData(url, params,data){ var fromDate=new FormData();for(var key in data){fromDate.append(key,data[key]);}return request('put',url,{'Content-Type': 'multipart/form-data'},params,fromDate);
}

例子:

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

「五度情报站」网罗全量企业情报,找客户、查竞品、寻商机!

在当下严峻的市场经济环境下,准确、及时的情报信息,就如同指引企业前行的明灯,能够让企业在风起云涌的市场大潮中保持敏锐的洞察力,掌握最新的市场动态,洞悉竞争对手的一举一动,先知先动,保持竞…

数字化转型背景下,MES管理系统的新特征是什么

近年来,随着智能制造的快速发展,MES管理系统作为生产过程中的重要管理系统,也越来越受到企业的关注和应用。在实现MES系统的过程中,需要将JIT思想融入其中,实现业务流程管理的自动化;同时,也需要…

苍穹外卖(三) 员工分页及技术实现细节

2. 员工分页查询 2.1 需求分析和设计 2.1.1 产品原型 2.1.2 接口设计 2.2 代码开发 2.2.1 设计DTO类 根据请求参数进行封装 2.2.2 封装PageResult 后面所有的分页查询,统一都封装为PageResult对象。 员工信息分页查询后端返回的对象类型为: Result 2.…

如何在Ubuntu 20.04.6 LTS系统上运行Playwright自动化测试

写在前面 这里以 Ubuntu 20.04.6 LTS为例。示例代码:自动化测试代码。 如果过程中遇到其他非文本中提到的错误,可以使用搜索引擎搜索错误,找出解决方案,再逐步往下进行。 一、 环境准备 1.1 安装python3 1.1.1 使用APT安装Py…

一种用于肽图分析的烷化剂,Desthiobiotin-Iodoacetamide

中文名:脱硫生物素-碘乙酰胺 英文名:Desthiobiotin-Iodoacetamide 化学式:C14H25IN4O3 分子量:424.28 外观:固体/粉末 规格:10mg、25mg、50mg等(接受各种规格的定制服务,具体可…

源码部署lamt架构

源码部署lamt架构 lamt由apache,mysql,tomcat三者组成 文章目录 源码部署lamt架构1.准备工作1.1.配置yum源,关闭防火墙和selinux1.2.拉取相应源码包 2.安装apache3.安装mariadb4.安装tomcat 1.准备工作 1.1.配置yum源,关闭防火墙…

Linux上安装Redis教程

本篇文章是基于CentOS7,安装Redis版本为redis-6.2.6。 一、下载并解压Redis 1、执行下面的命令下载redis: wget https://download.redis.io/releases/redis-6.2.6.tar.gz 2、解压redis: tar xzf redis-6.2.6.tar.gz 3、移动redis目录&a…

android之TextView自由选择复制

文章目录 前言一、效果图二、实现步骤1.OnSelectListener2.SelectionInfo类3.TextLayoutUtil类4.复制弹框的xml布局5.弹框背景Drawable6.倒三角Drawable7.复制工具类8.调用 总结 前言 根据时代进步,那些干产品的也叼砖起来了,今天就遇到一个需求&#x…

第一次汇报相关问题

深度学习现在已经学习到了Mini-Batch,early-stop等针对特定场景优化的算法了。 代码已经实现了一个L层的神经网络的构建了 论文看了一些综述 主要思考的两个方向:云计算和嵌入式 云计算:分布式机器学习、联邦学习、服务器负载均衡等 嵌入式&…

前端axios下载导出文件工具封装

使用示例: import { fileDownload } from /utils/fileDownloadfileDownload({ url: process.env.VUE_APP_BASE_URL /statistic/pageList/export, method: post, data: data })工具类: import store from ../store/index import {getAccessToken } fro…

【大数据】HBase入门指南

原创不易,注重版权。转载请注明原作者和原文链接 文章目录 HBase特性Hadoop的限制基本概念NameSpaceTableRowKeyColumnTimeStampCell 存储结构HBase 数据访问形式架构体系HBase组件HBase读写流程读流程写流程 MemStore Flush参数说明 StoreFile Compaction参数说明触…

ros学习笔记(1)Mac本地安装虚拟机,安装Ros2环境

Ros与Linux的关系 Ros环境基于Linux系统内核 我们平时用的是Linux发行版,centos,ubuntu等等,机器人就用了ubunut 有时候我们经常会听到ubunue的版本,众多版本中,有一些是长期维护版TLS,有一些是短期维护…