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';