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

在html中引入: 
<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的更多相关文章

  1. Vue小项目二手书商城:(二)axios前后端数据交互

    实现内容: 写路由接口(express) axios取数据 一.写接口 1.我们要在前端取到后端的数据(之前写的data.json)可以用vue-resourse或者用axios,在vue2之后官方就 ...

  2. vue项目搭建 (二) axios 封装篇

    vue项目搭建 (二) axios 封装篇 项目布局 vue-cli构建初始项目后,在src中进行增删修改 // 此处是模仿github上 bailicangdu 的 ├── src | ├── ap ...

  3. AntDesign vue学习笔记(二)axios使用

    之前在vue页面中引入axios使用,本篇在mainjs中引入,这样就不用单独在每个页面引入 1.mainjs中引入axios,设置基础url import axios from 'axios' ax ...

  4. vue中axios使用二:axios以post,get,jsonp的方式请求后台数据

    本文为博主原创,转载请注明出处 axios在上一篇中讲过:vue中axios使用一:axios做拦截器,axios是请求后台资源的模块,用来请求后台资源. axios本身是支持get,post请求后台 ...

  5. Vue之封装二次axios

    第一步,首先安装axios,这里推荐局部安装 npm i -D axios 第二步,在src目录下创建request文件夹,然后在里面创建两个文件http.js.api.js http.js impo ...

  6. 02 . 处理axios的三个问题 :设置基路径/axios挂载到vue原型/请求时自动携带token

    //使用API时必须在请求头中使用 Authorization 字段提供 token 令牌 import axios from 'axios' // 处理axios的三个问题 // 处理一:基路径 a ...

  7. Vuex、axios、跨域请求处理和import/export的注意问题

    一.Vuex 1.介绍 vuex是一个专门为Vue.js设计的集中式状态管理架构. 对于状态,我们把它理解为在data中需要共享给其他组件使用的部分数据. Vuex和单纯的全局对象有以下不同: 1. ...

  8. Vue小项目二手书商城:(一)准备工作、组件和路由

    本项目基于vue2.5.2,与低版本部分不同之处会在(五)参考资料中提出 完整程序:https://github.com/M-M-Monica/bukesi 实现内容: 资源准备(mock数据) 组件 ...

  9. Vue用axios跨域访问数据

    Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...

  10. vue.js - axios Get、Post方法传参给 .net core webapi。

    一:axios中是 Get请求: 1:在vue项目中通过params属性携带数据: let _self = this; axios({ method:'get', url:'http://localh ...

随机推荐

  1. 《Kubernetes零基础快速入门》PDF电子书赠阅

    <Python 3.8从入门到精通(视频教学版)> <Kubernetes零基础快速入门> PDF电子书赠阅,个人学习使用,禁止任何形式的商用. https://pan.bai ...

  2. JavaScript常用的8个数组去重实战源码

      JavaScript常用的8个数组去重实战源码 在我们学习和使用JavaScript的中,会经常使用到数组的去重,接下来的内容,来给大家分享一下,我们在开发过程中,常用到的数组去重方法,这些方法都 ...

  3. R7-7 调查电视节目受欢迎程度

    R7-7 调查电视节目受欢迎程度 分数 15 全屏浏览题目 切换布局 作者 颜晖 单位 浙大城市学院 某电视台要调查观众对该台8个栏目(设相应栏目编号为1~8)的受欢迎情况,共调查了n位观众(1≤n≤ ...

  4. python语法中的左值、右值和字符

    位置决定语义 在下面的python代码中,忽略掉语法错误,源码中同样一个单词tsecer在不同的位置有不同的意义 import之后 在import之后的tsecer是作为一个简单的字面字符串来处理:这 ...

  5. java基于ssm开发的宠物商城宠物店源码

    简介 关于宠物的商店,首页,搜索商品,详情页,可选择尺寸,衣服颜色,根据不同规格显示不同的商品价格,加入购物车,立即购买,评价列表展示,商品详情展示,商品评分,分类商品,标签查询,更多分类查询 演示视 ...

  6. 用Docker-Compose一分钟搭建Wordpress博客系统

    环境: CentOS 7.5 Docker 20.10.2 Docker-Compose 1.25.5 [root@localhost ~]# cat /etc/redhat-release Cent ...

  7. Counting Triangles

  8. Hbase 报错hbase Could not start zk requested port of 2181

    windows下面   解决: 1. conf/hbase-env.cmd set HBASE_MANAGES_ZK=false 2. 先启动Hbase start-Hbase.cmd 再启动 zoo ...

  9. TypeScript 元组

    TypeScript 元组 我们知道数组中元素的数据类型都一般是相同的(any[] 类型的数组可以不同),如果存储的元素数据类型不同,则需要使用元组. 元组中允许存储不同类型的元素,元组可以作为参数传 ...

  10. python 发送 application/x-www-form-urlencoded 类型的数据包

    在网上百度了很多,坑的要死,基本不咋好用,自己多尝试了几遍,成功实现了. data 的构建方式 data = f"page={page}&sign={sign}&t={t}& ...