二,使用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 ...
随机推荐
- python性能测试工具locust
1.概述: 1.我们对目前比较流行的几款压测工具进行了调研.Jmeter与LoadRunner基于多线程实现并发,多线程由操作系统决定,由于上下文切换频繁.内核调度频繁,单台机器很难产生大量线程并发. ...
- 大小写字符转换【Sql Server和C#两种写法】
案例:Var Str = "abdCnd" 如何将Str = "ABDCND"? Sql Server写法:upper(Str) ==> Lower ...
- php框架之odp-环境部署安装
一.安装配置 1.安装很简单,创建安装目录,然后在linux上使用wget命令从获取地址下载,然后解压,最后在安装目录下执行bin/odp_install即可. 例如:(只是举例,请安装最新的版本) ...
- 【git】2.5远程仓库的使用
资料来源 (1) https://git-scm.com/book/zh/v2/Git-%E5%9F%BA%E7%A1%80-%E8%BF%9C%E7%A8%8B%E4%BB%93%E5%BA%93% ...
- VIM的撤销与恢复设置行数
vim撤销操作:u vim恢复操作:ctrl+r 设置行数: :set nu
- ScrollView 滚动条
<style name="fa_SlideTabRecyclerView"> <item name="android:scrollbarThumbVer ...
- saml login的流程
用户会访问首页/, 然后进入到指定的一个URL, 就是admin在site-settings里面的设置的那个地址, 发现权限不够,进入到403accesslogin, 然后调用user4032logi ...
- ubuntu-wireshark打开出现错误的问题
The capture session could not be initiated on interface 'enp2s0' (You don't have permission to captu ...
- Idea报错:Command line is too long.
https://blog.csdn.net/qq_40682764/article/details/109215368 run–>edit configurations–>你的项目–> ...
- Div的几种选择器
Div 是一个html标签,一个块级元素(单独显示一行),单独使用没有意义,需要结合CSS来使用,主要用于页面的布局. div选择器: 1.元素选择器: 1 <style> 2 div{ ...