axios 的二次封装及使用
1 // 将axios再次封装
2 import axios from 'axios'; // npm i -S axios
3
4 import Qs from 'qs' // npm i -S qs
5
6 // 提示组件 mint-ui 中的提示组件
7
8 axios.defaults.withCredentials = true; // false 不跨域 true 跨域
9 axios.defaults.headers.common["token"] = localStorage.getItem('token'); // 这是设置请求头 不是必须的
10
11 export default function(path, params, method = "GET", headerType = "json") {
12 let baseURL = "/api";
13 let data = {}; // 将参数解析出来进行放置的地方
14 // 设置请求头
15 if(method == "post") {
16 if(headerType == "json") {
17 axios.defaults.headers.post["Content-Type"] =
18 "application/json;charset=utf-8";
19 data = params;
20 } else if(headerType == "multipart") {
21 axios.defaults.headers.post["Content-Type"] =
22 "multipart/form-data";
23 } else {
24 axios.defaults.headers.post["Content-Type"] =
25 "application/x-www-form-urlencoded";
26 data = Qs.stringify(params);
27 }
28 }
29 if(method == "get") {
30 if(headerType == !"json") {
31 axios.defaults.headers["Content-Type"] =
32 "application/x-www-form-urlencoded;charset=utf-8";
33 }
34 data = Qs.stringify(params);
35 path = path + "?" + data;
36 data = {};
37 }
38 return new Promise( (resolve, reject) => {
39 axios({
40 baseURL,
41 method,
42 url: path,
43 data,
44 timeout: 6000
45 })
46 .then( res => {
47 resolve(res.data.result);
48 })
49 .catch( err => {
50 reject(err);
51 })
52 })
53 }
axios 的二次封装及使用的更多相关文章
- vue中axios的二次封装
我们做项目时,虽然axios也可以直接拿来用,但是对接口比较零散,不太好进行维护,也会产生大量的重复代码,所以我在这对axios进行了统一接口处理 第一步,先在src中的公共文件夹中如utils里新建 ...
- vue项目中对axios的二次封装
近来在使用vue重构公司m站时,使用了axios来进行数据的请求,由于项目的需要,对axios进行了二次封装,点击进入axios //引入axios import axios from 'axios' ...
- axios 请求二次封装
/** * 封装get方法 * @param url * @param data * @returns {Promise} */ export function get(url, params) { ...
- axios的二次封装
'use strict' import axios from 'axios' import qs from 'qs' var host = "https://www.easy-mock.co ...
- axios 简单二次封装
import axios from 'axios' import { Message } from 'element-ui'; // 设置baseURL //axios.defaults.baseUR ...
- Vue:对axios进行简单的二次封装
主要做3点: 1.配置一个请求地址前缀 2.请求拦截(在请求发出去之前拦截),给所有的请求都带上 token 3.拦截响应,遇到 token 不合法则报错 // 对 axios 的二次封装 impor ...
- axios的简易二次封装
Axios的二次封装 1.在src文件夹下创建utils文件夹,再创建request.js文件 request.js //引入axios import axios from 'axios' //创建实 ...
- 原生 Ajax 封装 和 Axios 二次 封装
AJAX 异步的JavaScript与XML技术( Asynchronous JavaScript and XML ) Ajax 不需要任何浏览器插件,能在不更新整个页面的前提下维护数据,但需要用户允 ...
- axios 二次封装
一般项目往往要对 axios 库进行二次封装,添加一些自定义配置和拦截器等 案例 ./service/axios.js 1234567891011121314151617181920212223242 ...
- 【vue】axios二次封装,更好的管理api接口和使用
在现在的前端开发中,前后端分离开发比较主流,所以在封装方法和模块化上也是非常需要掌握的一门技巧.而axios的封装也是非常的多,下面的封装其实跟百度上搜出来的axios封装或者axios二次封装区别不 ...
随机推荐
- linux安装node.js教程
我们使用包管理器安装,非常方便. 先看看有哪些版本: dnf module list nodejs 目前最新的是14,那就装14好了: dnf module install nodejs:14 要装啥 ...
- 【公众号搬运】React-Native开发鸿蒙NEXT(2)
.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rg ...
- 2.3.net core 工作流WorkFlow流程(流程节点附件设置)
流程节点附件设置 WikeFlow官网:http://www.wikesoft.com 有些流程要求某些节点必须上传附件. 你只需要在流程节点中配置附件的Key,附件名称,是否必传. 如下图: 文件存 ...
- 远程登录Mysql,命令行登录Mysql的方法
1.本地登录MySQL命令:mysql -u root -p //root是用户名,输入这条命令按回车键后系统会提示你输入密码2.指定端口号登录MySQL数据库将以上命令:mysql -u roo ...
- MYSQL优化学习总结
mysql学习小结---索引的使用及优化 1. 索引那些事 1.1 复合索引 复合索引是指:包含一个或者多个列的索引.但复合索引的触发是有条件的. 假设我们现在有一个复合索引a,a中包含了三个列(id ...
- FastAPI如何用角色权限让Web应用安全又灵活?
title: FastAPI如何用角色权限让Web应用安全又灵活? date: 2025/06/13 05:46:55 updated: 2025/06/13 05:46:55 author: cmd ...
- Java变量类型识别
方法: 1.反射方式,成员变量的类型判断2.isInstance用法3.利用泛型识别类型一.新建测试类 import java.util.Date; import com.cxyapi.generic ...
- P4383 [八省联考 2018] 林克卡特树
P4383 [八省联考 2018] 林克卡特树 米奇妙妙题 题目的主要操作就是断掉一条边再连一条边权为\(0\)的边 我们考虑先不连那些后来加上的边权为\(0\)的边,先把所有的需要断的边都断掉,那么 ...
- Mysql规范50条
支付业务很大程度上依赖于数据库做支持,正确的设置数据库参数以及正确的使用数据库对非常重要,我这把自己之前的一些心得贴出来,抛砖引玉,大家可以把自己的一些心得分享出来供大家参考学习.一.数据库配置1. ...
- vue脚手架搭建,出现无法将“vue”项识别....
前言: 肯定有很多小伙伴和我一样,想在各种开发工具的终端运行命令来新建vue-cli脚手架,可是vue命令就是识别不到,然后又很烦,不妨看看我这个解决方案吧!!! 遇见问题: vue : 无法将&qu ...