Axios的简单用法

一转眼Vue 3.0都要发布了,学习使用Vue也有一段时间了,记录一下axios的用法

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中,有点类似于ajax,但是在MVVM模式中,使用axios是有好处的

1.从浏览器中创建 XMLHttpRequest

2.支持 Promise API

3.客户端支持防止CSRF

4.提供了一些并发请求的接口（重要，方便了很多的操作）

5.从 node.js 创建 http 请求

6.拦截请求和响应

7.转换请求和响应数据

8.取消请求

9.自动转换JSON数据

ajax相对axios的缺点有

1.本身是针对MVC的编程,不符合现在前端MVVM的浪潮

2.基于原生的XHR开发，XHR本身的架构不清晰。

3.JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）

4.不符合关注分离（Separation of Concerns）的原则

5.配置和调用方式非常混乱，而且基于事件的异步模型不友好。

当然ajax也是有优点的

1.异步请求，不妨碍用户浏览页面或者其他操作。

2.局部刷新，无需重新刷新页面。

3.界面与应用分离。有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。

4.基于标准被广泛支持。

5.前端和后端负载平衡。最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。

一、axios获取数据的例子

axios.get("/static/data").then(function(res) {
      var data = res.data.data.list;
      for (var i = 0; i < data.length; i++) {
        if (data[i].id == id) {
          _this.o1.push(data[i]);
        }
      }
    });

二、axios通过get方式返回值

1.通过url返回参数

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

2.通过params传递参数

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

三、axios通过post方式返回值

axios.post('/user', {
    firstName: 'Fred',        // 参数 firstName
    lastName: 'Flintstone'    // 参数 lastName
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });