二,使用axios
1,下载https://unpkg.com/axios@1.3.2/dist/axios.min.js保存在js目录下,命名为axios.js
2,http.js
let baseUrl = "https://xxx.com/";
// 统一配置
let ST_REQUEST = null;
function formatHttp(axios, requestObj) {
axios.defaults.withCredentials = true;
ST_REQUEST = axios.create({
baseURL: baseUrl,
validateStatus(status) {
// 200 外的状态码都认定为失败
return status === 200;
},
}); // 拦截请求
ST_REQUEST.interceptors.request.use(
(config) => {
return config;
},
(error) => {
return Promise.reject(error);
}
); // 拦截响应
ST_REQUEST.interceptors.response.use(
(config) => {
let data = {};
if (typeof config.data == "object") {
data = JSON.parse(JSON.stringify(config.data));
} else {
let str = config.data;
data = eval("(" + str + ")");
} if (data.code === 1) {
return data;
} else {
return Promise.reject(data);
}
},
(error) => {
return Promise.reject(error);
}
);
if (requestObj.method === "post") {
return post(requestObj.url, requestObj.data);
}
}
function post(url, params = {}) {
return ST_REQUEST.post(url, params, {
transformRequest: [
(params) => {
let result = "";
Object.keys(params).forEach((key) => {
if (
!Object.is(params[key], undefined) &&
!Object.is(params[key], null)
) {
result +=
encodeURIComponent(key) +
"=" +
encodeURIComponent(params[key]) +
"&";
}
});
return result;
},
],
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
});
}
3,使用http.js
<script src="../js/axios.js"></script>
<script src="../js/http.js"></script>
// 保存
function save() {
let params = {
windowVerify: document.getElementsByName("windowVerify")[0].checked,
username: document.getElementsByName("username")[0].value
};
formatHttp(axios, {
method: "post",
url: "",
data: params,
})
.then((res) => {
console.log(res);
})
.catch((e) => {
messageTip(e.msg);
});
}
二,使用axios的更多相关文章
- Vue小项目二手书商城:(二)axios前后端数据交互
实现内容: 写路由接口(express) axios取数据 一.写接口 1.我们要在前端取到后端的数据(之前写的data.json)可以用vue-resourse或者用axios,在vue2之后官方就 ...
- vue项目搭建 (二) axios 封装篇
vue项目搭建 (二) axios 封装篇 项目布局 vue-cli构建初始项目后,在src中进行增删修改 // 此处是模仿github上 bailicangdu 的 ├── src | ├── ap ...
- AntDesign vue学习笔记(二)axios使用
之前在vue页面中引入axios使用,本篇在mainjs中引入,这样就不用单独在每个页面引入 1.mainjs中引入axios,设置基础url import axios from 'axios' ax ...
- vue中axios使用二:axios以post,get,jsonp的方式请求后台数据
本文为博主原创,转载请注明出处 axios在上一篇中讲过:vue中axios使用一:axios做拦截器,axios是请求后台资源的模块,用来请求后台资源. axios本身是支持get,post请求后台 ...
- Vue之封装二次axios
第一步,首先安装axios,这里推荐局部安装 npm i -D axios 第二步,在src目录下创建request文件夹,然后在里面创建两个文件http.js.api.js http.js impo ...
- 02 . 处理axios的三个问题 :设置基路径/axios挂载到vue原型/请求时自动携带token
//使用API时必须在请求头中使用 Authorization 字段提供 token 令牌 import axios from 'axios' // 处理axios的三个问题 // 处理一:基路径 a ...
- Vuex、axios、跨域请求处理和import/export的注意问题
一.Vuex 1.介绍 vuex是一个专门为Vue.js设计的集中式状态管理架构. 对于状态,我们把它理解为在data中需要共享给其他组件使用的部分数据. Vuex和单纯的全局对象有以下不同: 1. ...
- Vue小项目二手书商城:(一)准备工作、组件和路由
本项目基于vue2.5.2,与低版本部分不同之处会在(五)参考资料中提出 完整程序:https://github.com/M-M-Monica/bukesi 实现内容: 资源准备(mock数据) 组件 ...
- Vue用axios跨域访问数据
Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...
- vue.js - axios Get、Post方法传参给 .net core webapi。
一:axios中是 Get请求: 1:在vue项目中通过params属性携带数据: let _self = this; axios({ method:'get', url:'http://localh ...
随机推荐
- golang 日志
package log import ( "NOONASN/global" "github.com/natefinch/lumberjack" "go ...
- T14 风扇狂转修整TPFanControl.ini 屏蔽pwr
//注意标红部份屏蔽pwr //NEW: Set UseTWR=1 to see more sensors, will work only on newer T4xx// ATTENTION: if ...
- Linux上的I2C基础知识
Linux上的I2C基础知识 什么是I2C I2C(Inter-Integrated Circuit,eye-squared-C),也称为 I2C 或 IIC,是一种同步.多控制器/多目标(主/从). ...
- jenkins 连接Windows
1.Windows机器需要安装powershell Server 下载路径:https://www.nsoftware.com/powershell/server/ 点击startk开启该服务 2.配 ...
- centos7下的apache2.4安全配置
基本概括 关键词Server ServerRoot "/etc/httpd" #apache软件安装的位置 Listen 80 #监听的端口号 ServerName ww ...
- mysql and or优先级
and优先级高于or, 不使用()情形:or后仍遇到and时,先算and再算or select * from table1 where f1=1 and f2=2 or f3=3 and f4=4 o ...
- 面试官:MySQL一千万数据,怎么快速查询?
前言 面试官:来说说,一千万的数据,你是怎么查询的? me:直接分页查询,使用limit分页. 面试官:有实操过吗? me:肯定有呀 此刻献上一首<凉凉> 也许有些人没遇过上千万数据量的表 ...
- https原理(五)双向实践(https代理)
本文为了证明: 1 双向可以通过直接转发tcp的中间人代理网关 2 双向可以防止明文中间人 开始.(服务端need,使用myhost.com-pub-capub.jks,myhost.com-pub- ...
- list.size() = 1 但显示 All elements are null
https://blog.csdn.net/weixin_43899069/article/details/124668722 if (CollectionUtils.isNotEmpty(list) ...
- SqlSugar 代码生成 数据库及表
在实际开发中如何在sqlsugar中通过model生成数据表呢? 废话不说上代码 一.引入sqlsugarcore 二.编写Model代码 先写一个model举例 namespace 用户管理.Mod ...