一、预备知识

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的更多相关文章

  1. 10. vue axios 请求未完成时路由跳转报错问题

    axios 请求未完成时路由跳转报错问题 前两天项目基本功能算是完成了,在公司测试时遇到了遇到了一个问题,那就是在请求未完成时进行路由跳转时会报错,想了几种办法来解决,例如加loading,请求拦截, ...

  2. vue+axios+elementUI文件上传与下载

    vue+axios+elementUI文件上传与下载 Simple_Learn 关注  0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6 1.文件上传 这里主要 ...

  3. vue axios 取消上次请求

    axios.defaults.timeout = 1000 * 5axios.defaults.baseURL = baseUrlvar CancelToken = axios.CancelToken ...

  4. vue axios拦截器 + 自编写插件 实现全局 loading 效果;

    项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...

  5. vue axios使用form-data的形式提交数据的问题

    vue axios使用form-data的形式提交数据vue axios request payload form data由于axios默认发送数据时,数据格式是Request Payload,而并 ...

  6. VUE AXIOS 跨域问题

    背景: 后台跨域使用通配符:context.Response.Headers.Add("Access-Control-Allow-Origin", "*"); ...

  7. vue axios 总结篇

    1.npm --save 和 --save-dev 有什么区别 发布到线上的叫生产环境~,在本地开发的时候叫开发环境,--save就是会打包到线上去并且在线上环境能用到的,比如你npm install ...

  8. 基于Vue + axios + WebApi + NPOI导出Excel文件

    一.前言 项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件.其业务场景,主要是列表页 ...

  9. vue+axios新手实践实现登陆

    vue+axios新手实践实现登陆 https://segmentfault.com/a/1190000015201803 增加 利用HTML5的history.replacestate()修改当前页 ...

随机推荐

  1. 洛谷 题解 P5015 【标题统计】 NOIP2018 普及组 T1

    没有人用 scanf("%c", &ch) != EOF 吗? scanf 和 EOF 会伤心的. 思路:逐个读入字符,遇到EOF中止,对于每个读入的字符进行判断. 附上考 ...

  2. WebGPU学习(五): 现代图形API技术要点和WebGPU支持情况调研

    大家好,本文整理了现代图形API的技术要点,重点研究了并行和GPU Driven Render Pipeline相关的知识点,调查了WebGPU的相关支持情况. 另外,本文对实时光线追踪也进行了简要的 ...

  3. C# Pkcs8 1024位 加密 解密 签名 解签

    部分代码来至 https://www.cnblogs.com/dj258/p/6049786.html using System; using System.Collections.Generic; ...

  4. 【Webpack】315- 手把手教你搭建基于 webpack4 的 vue2 多页应用

    背景 前司和现司都会存在这种业务场景:有很多 H5 页面是不相关的,如果使用 SPA 的话,对于很多落地页和活动页不太友好,有一些纯前端页面加载过慢,所以就萌生了创建一个多页面 MPA 的框架. 起初 ...

  5. docker-网络管理-桥接网络

    一.配置桥接网络   需求:为了使本地网络中的机器和Docker容器更方便的通信,我们经常会有将Docker容器配置到和主机同一网段的需求.这个需求其实很容易实现,我们只要将Docker容器和宿主机的 ...

  6. 理解Vue中的nextTick

    参考博客:https://www.jianshu.com/p/a7550c0e164f

  7. win10 修改用户目录为英文

    win10家庭版怎样进入 administratornet user administrator /active:yes net user administrator /active:no

  8. 【Java Web开发学习】Spring MVC 使用HTTP信息转换器

    [Java Web开发学习]Spring MVC 使用HTTP信息转换器 转载:https://www.cnblogs.com/yangchongxing/p/10186429.html @Respo ...

  9. windows10查看电脑已经保存的wifi密码

    1,打开windows的命令窗口,输入    netsh wlan show profiles,如下图,这个命令仅仅只是查看一下电脑保存的所有的wifi名字 2,需要查看密码的话,则需要输入这个命令, ...

  10. 2.java三大特性

    1. 封装 方法:将属性值修饰为私有,提供get和set方法.造成所有对对象的访问都是通过方法的调用来完成(配合this的使用) 结果:用户不能直接随意改变一个对象内的属性,必须通过调用方法(验证)来 ...