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二次封装区别不 ...
随机推荐
- APP商城模块地址
个人将平时用到比较多的功能,做成模块案例的形式放到app商城,供大家下载使用,欢迎下载 下载地址:https://apps.odoo.com/apps/modules/browse?search=me ...
- L2-4、选择微调还是提示工程?企业级内容生成的最佳实践
一.Prompt 工程与模型微调的本质区别 Prompt 工程的特点 Prompt 工程是通过精心设计输入提示来引导大语言模型生成所需输出的技术.它不改变模型的基本参数,而是利用现有模型能力. 工作原 ...
- 4 MyBatis动态SQL之trim元素|转
摘要:trim标签是一个格式化的标签,可以完成set或者where标签的功能. 1 MyBatis动态SQL之if 语句 2 MyBatis动态sql之where标签|转 3 MyBatis动态SQL ...
- elasticsearch RestHighLevelClient 关于document的常用操作 ---------- 查询篇
在es中查询大致分为两类:普通查询.复杂查询. 普通查询只需要使用:GetRequest即可 复杂查询涉及很多: SearchSourceBuilder(用于指定搜索条件时的附加条件:排序.分页.查询 ...
- HyperWorks的RT功能及使用技巧
在Altair(HyperWorks)里,当结构中包含 T 型.X 型或更复杂的连接特征(图 2-12 所示)时,此功能非常有效.不适用于没有 T 型连接的特征(图 2-12 右侧). 图 2-12 ...
- 2021成都.NET开发者Connect线下活动
2021年4月11日,在成都市天府新区南湖公园,2021成都.NET开发者Connect线下活动圆满结束,来自成都地区东南西北的25位.NETer汇聚一堂,面基交流,吃饭畅聊,并进行了合影留念. 首先 ...
- json\jquery入门
一)什么是JSON (1)JSON(Java Script Object Notation(记号,标记))是一种轻量级的数据交换语言, 以文本字符串为基础,且易于让人阅读 注意:XML就是一个重量级的 ...
- java--servelt编程
Servlet的映射路径 <servlet-mapping> <!-- servlet的内部名称,一定要和上面的内部名称保持一致!! --> <servlet-name& ...
- actions自动化部署gitpage
新增配置文件 .github/workflows/build.yml name: interview-book build work # 工作流name on: # 触发 workflow 的条件 p ...
- CF1989D Smithing Skill 题解
CF1989D Smithing Skill 这篇题解是我在赛场上的真实思路,所以可能会比较冗长.但是相较于其他题解,读者可以在这篇题解中理解为什么会想到使用动态规划.我认为,授人以鱼不如授人以渔,理 ...