zoukankan      html  css  js  c++  java
  • 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);
      });
  • 相关阅读:
    idea设置全局ignore
    win 2012 安装mysql 5.7.20 及报错 This application requires Visual Studio 2013 Redistributable. Please ins
    win 2012 安装mysql 5.7.20 及报错 This application requires Visual Studio 2013 Redistr
    kafka 删除 topic
    java编译中出现了Exception in thread “main" java.lang.UnsupportedClassVersionError
    Centos中使用yum安装java时,没有jps的问题的解决
    Spring 整合Junit
    Spring纯注解配置
    Spring 基于注解的 IOC 配置
    打印java系统的信息
  • 原文地址:https://www.cnblogs.com/yinxuejunfeng/p/11545054.html
Copyright © 2011-2022 走看看