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

上一篇:input、textarea 输入框IOS键盘顶起页面不反弹,Android手机隐藏掉input/textarea


下一篇:android通过web与后台数据库交互