一、预备知识
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';