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. Git客户端部署使用-生成ssh密钥2

    1. 设置用户名 其中双引号中的 XXX 是用户名,记得替换成自己的用户名,需要注意的是这里的用户名是git服务器所使用的名称,一般公司用的都是员工名称的全拼. # 在git窗口中输入命令行: git ...

  2. 基于Mybatis Plus的一种查询条件构建方案

    ! 重要: 遐(瞎)想的思路, 希望各位多多建议 record为jdk17写法, 使用class也不会有问题 背景 身为资深程序员, 上班最重要的事当然是增删改查(bushi). 比如今天, 组长甩给 ...

  3. YOLOV4网络

    Yolov4网络代码 from collections import OrderedDict import torch import torch.nn as nn from Darknet_53 im ...

  4. django连接ubuntu22下的mysql8

    1.安装mysql(这里就不过多赘述了) sudo apt-get install mysql-server 2.登录mysql   (1) 在 根目录/etc/mysql/debian.cnf ,使 ...

  5. 【NPDP专项练习】第六章 市场研究

    第六章 市场研究 1.VOC也叫客户心声,指的是. A 选择一个单一的投资组合项目,并保证所有项目都在策略内 B 利用迭代在专家组中形成共识的决策 C 通过人工"商店"引导潜在客户 ...

  6. jmeter分布式压测配置

    首选 压力机A,压力机B,压力机C,   压力机A作为控制台    压力机B,压力机C作为分布式的测试机 压力机Aip:172.16.23.69, 压力机Bip:192.168.184.128 压力机 ...

  7. R语言码农的Scala学习心得

    为了MLib,最近是铁了心要学好Spark.关注本博客的朋友应该知道我的主力语言是R,无论是训练模型还是做Elasticsearch,都是通过R脚本来操作的.之前的<通过 Spark R 操作 ...

  8. centos8修改更新迁徙到Stream方法

    迁徙到Stream 此方案比较简单,输入以下命令即可: wget 'http://mirror.centos.org/centos/8-stream/BaseOS/x86_64/os/Packages ...

  9. Dynamics 365 CRM 弹窗 打开自定义页面 Xrm.Navigation.navigateTo Open Web Resource

    在CRM中经常需要打开自定义的HTML界面,而且打开这个界面的时候需要模态窗体,阻止用户填写除了弹窗之外的东西,只能先填写窗体的内容: 这个时候很多人喜欢选择第三方的library去实现模态窗体,但是 ...

  10. gin web 2

    routers/router.go package routers import ( "github.com/gin-gonic/gin" "gin-blog/pkg/s ...