10. Vue - axios
一、预备知识
1. JS面向对象
- 特点:ES5之前用构造函数方式,构造函数就是一个普通函数,它的函数名大写。
- 构造函数的问题:方法不会提升至构造函数内,而是每创建一个对象,就要把那个方法保存在每个对象中。
① 不常用写法
function Person(name, age){
this.name = name;
this.age = age; // self.age = age
// 把这个方法保存在每个对象中
this.sayHi = function(){
console.log('hello world!');
}
}
// 使用new关键字创建对象
let men = new Person('alex', 18)
men.sayHi() // hello world!
② 原型方式
function Person(name, age){
this.name = name;
this.age = age; // self.age = age
}
// 给构造函数的原型绑定方法,所有对象都它
Person.prototype,sayHi = function(){console.log('hello world!')}
let men = new Person('alex', 18)
// 对象找属性或方法(1)先找自己 (2)找不到就往上找它的原型
③ this参数问题
// 谁调用的这个方法 this就指向谁 this->self
Person.prototype,sayHi = function(){console.log(this.name,'hello world!')}
④ ES6中写法
class Point{
constructor(x, y){
this.x = x;
this.y = y;
} // 不要加逗号
toString(){
return `(${this.x}, ${this.y})`;
}
}
let p = new Point(10, 20);
console.log(p.x)
p.toString();
⑤ 补充知识:为js中String原型绑定一个sb方法;后续所有此类对象都拥有此方法
String.prototype.sb = function(){console.log('hello')}
'alex'.sb() // hello
2. Promise对象
- promise主要针对处理异步编程更方便处理,阅读。防止回调函数一直往右写
- promise写法
- promise对象多用于表示一个异步操作,① .then() 当异步操作成功之后会做的事 ②catch(error) 当异步操作出错的时候做的事
$.ajax({
url: '/books/',
type: 'get',
})
.then(function(){
})
.catch(function(error){
})
二、axios
1. axios定义
基于 promise 用于浏览器和 node.js 的 http 客户端;(https://www.kancloud.cn/yunye/axios/234845)
2. 特点
- 支持浏览器和node.js
- 支持promise
- 能拦截请求和响应
- 能转换请求和响应数据
- 能取消请求
- 自动转换json数据
- 浏览器端支持防止CSRF(跨站请求伪造)
3. 安装
(1) npm安装
$ npm install axios
(2) cdn引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
4. 例子
(1) 发送Get请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// Optionally the request above could also be done as
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
(2) 发送Post请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
(3) axios默认路由前缀
Axios.defaults.baseURL = 'https://www.luffycity.com/api/v1';
10. Vue - axios的更多相关文章
- 10. vue axios 请求未完成时路由跳转报错问题
axios 请求未完成时路由跳转报错问题 前两天项目基本功能算是完成了,在公司测试时遇到了遇到了一个问题,那就是在请求未完成时进行路由跳转时会报错,想了几种办法来解决,例如加loading,请求拦截, ...
- vue+axios+elementUI文件上传与下载
vue+axios+elementUI文件上传与下载 Simple_Learn 关注 0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6 1.文件上传 这里主要 ...
- vue axios 取消上次请求
axios.defaults.timeout = 1000 * 5axios.defaults.baseURL = baseUrlvar CancelToken = axios.CancelToken ...
- vue axios拦截器 + 自编写插件 实现全局 loading 效果;
项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...
- vue axios使用form-data的形式提交数据的问题
vue axios使用form-data的形式提交数据vue axios request payload form data由于axios默认发送数据时,数据格式是Request Payload,而并 ...
- VUE AXIOS 跨域问题
背景: 后台跨域使用通配符:context.Response.Headers.Add("Access-Control-Allow-Origin", "*"); ...
- vue axios 总结篇
1.npm --save 和 --save-dev 有什么区别 发布到线上的叫生产环境~,在本地开发的时候叫开发环境,--save就是会打包到线上去并且在线上环境能用到的,比如你npm install ...
- 基于Vue + axios + WebApi + NPOI导出Excel文件
一.前言 项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件.其业务场景,主要是列表页 ...
- vue+axios新手实践实现登陆
vue+axios新手实践实现登陆 https://segmentfault.com/a/1190000015201803 增加 利用HTML5的history.replacestate()修改当前页 ...
随机推荐
- 洛谷 题解 P5015 【标题统计】 NOIP2018 普及组 T1
没有人用 scanf("%c", &ch) != EOF 吗? scanf 和 EOF 会伤心的. 思路:逐个读入字符,遇到EOF中止,对于每个读入的字符进行判断. 附上考 ...
- WebGPU学习(五): 现代图形API技术要点和WebGPU支持情况调研
大家好,本文整理了现代图形API的技术要点,重点研究了并行和GPU Driven Render Pipeline相关的知识点,调查了WebGPU的相关支持情况. 另外,本文对实时光线追踪也进行了简要的 ...
- C# Pkcs8 1024位 加密 解密 签名 解签
部分代码来至 https://www.cnblogs.com/dj258/p/6049786.html using System; using System.Collections.Generic; ...
- 【Webpack】315- 手把手教你搭建基于 webpack4 的 vue2 多页应用
背景 前司和现司都会存在这种业务场景:有很多 H5 页面是不相关的,如果使用 SPA 的话,对于很多落地页和活动页不太友好,有一些纯前端页面加载过慢,所以就萌生了创建一个多页面 MPA 的框架. 起初 ...
- docker-网络管理-桥接网络
一.配置桥接网络 需求:为了使本地网络中的机器和Docker容器更方便的通信,我们经常会有将Docker容器配置到和主机同一网段的需求.这个需求其实很容易实现,我们只要将Docker容器和宿主机的 ...
- 理解Vue中的nextTick
参考博客:https://www.jianshu.com/p/a7550c0e164f
- win10 修改用户目录为英文
win10家庭版怎样进入 administratornet user administrator /active:yes net user administrator /active:no
- 【Java Web开发学习】Spring MVC 使用HTTP信息转换器
[Java Web开发学习]Spring MVC 使用HTTP信息转换器 转载:https://www.cnblogs.com/yangchongxing/p/10186429.html @Respo ...
- windows10查看电脑已经保存的wifi密码
1,打开windows的命令窗口,输入 netsh wlan show profiles,如下图,这个命令仅仅只是查看一下电脑保存的所有的wifi名字 2,需要查看密码的话,则需要输入这个命令, ...
- 2.java三大特性
1. 封装 方法:将属性值修饰为私有,提供get和set方法.造成所有对对象的访问都是通过方法的调用来完成(配合this的使用) 结果:用户不能直接随意改变一个对象内的属性,必须通过调用方法(验证)来 ...