vue 使用axios
时间:2019-11-27
本文章向大家介绍vue 使用axios,主要包括vue 使用axios使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1、安装 vue-axios插件:
npm i vue-axios-plugin -S
2、安装 qs,用来转换参数
npm i qs -S
3、在main.js文件引入vue-axios-plugin和qs
import VueAxiosPlugin from 'vue-axios-plugin';
import QS from 'qs';
4、注册插件
const APIROOT = process.env.NODE_ENV === 'production' ? process.env.BASE_URL : 'http://localhost:8001/'; Vue.use(VueAxiosPlugin, { reqHandleFunc: config => { config.baseURL = APIROOT + 'ashx/'; config.headers = { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 'Authorization': Util.getToken() || '' }; config.transformRequest = [function (data, headers) { return QS.stringify(data); }]; config.timeout = 180000; config.maxContentLength = 2147483647; return config; }, reErrorFunc: error => { Toast(error); return Promise.reject(error); }, resHandleFunc: response => { !response.data.success && Toast(response.data.msg); return response.data; }, resErrorFunc: error => { Toast(error); return Promise.reject(error); } });
说明:
(1)Content-Type 默认值为 “application/json”,此时的 Request Headers 如下图
如此发送的请求在后台通过 HttpContext.Current.Request.Params 取不到参数,需要将其设置为 “application/x-www-form-urlencoded”
(2)此程序前后端分离,发送的请求需要携带 token,设置在 header 的 Authorization 中
(3)跨域请求时会发送两次请求,一次是OPTIONS请求,用于同服务器确认是否允许跨域,只有服务器允许跨域时才会发送第二次真实的请求,只要服务器允许跨域即可,客户端不用管,这个OPTIONS请求是取消不了的
原文地址:https://www.cnblogs.com/laoq112/p/11943827.html
- Oracle 12c数据库升级实战(r10笔记第70天)
- Oracle 12c升级检查问题分析(r10笔记第69天)
- 转--使用Revel(go)开发网站
- GoldenGate数据迁移的问题总结(二)(r10笔记第85天)
- Elasticsearch究竟要设置多少分片数?
- 设计模式(1)-使用简单工厂优化代码
- 简单易学的机器学习算法——因子分解机(Factorization Machine)
- Elasticsearch全文检索实战小结——复盘我带的第二个项目
- golang语言是如何处理栈的
- 【Go 语言社区】并发性
- GoldenGate数据迁移的问题总结(一)(r10笔记第84天)
- Elasticsearch大文件检索性能提升20倍实践(干货)
- Elasticsearch聚合优化 | 聚合速度提升5倍!
- Elasticsearch聚合后分页深入详解
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 5,linux入门到上手-文件与文件系统的压缩,打包与备份
- Animate Elements Continually Using an Infinite Animation Count---设置animation-iteration-count的次数为无限,让小球一直跳动
- sql server 自动附加本地 mdf 文件
- CAD关于图层添加图层操作(com接口c#语言)
- C++基础,从面向过程到面向对象
- Spring Cloud Feign设计原理
- JavaWeb开发获取客户IP地址
- 【2019.10.25 OI-Killer的模拟赛】2.黄队的宫殿
- 150、react-redux.4.0.0.js源码(无注释,共426行)
- Spring容器启动源码解析
- 查看oracle监听/连接oracle/查询表空间、用户、字符集、服务名和sid等sql
- json数据解析
- java反射Array的使用
- Cocos Creator 中 _worldMatrix 到底是什么(中)(转载)
- Zabbix实战-简易教程--中间件kafka监控