Web开发框架-VUE使用Axios调用后台WebAPI接口-开发框架文库

Web开发框架-VUE使用Axios调用后台WebAPI接口

Web开发框架-VUE使用Axios调用后台WebAPI接口-开发框架文库

Web开发框架-VUE使用Axios调用后台WebAPI接口

VUE简介

Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。我们都知道VUE更多是注重前段用户界面的渲染合操作，但是如果想到实现前后端之间的交互调用后台API，就需要借助其他组件，如今天要讲到的Axios，下边就重点讲解axios在vue中的使用。

Axios简介

Axios不是一种新的技术。

Axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，有以下特点：

Axios，基于 Promise 的 HTTP 客户端，可以工作于浏览器中，也可以在 node.js 中使用。

主要功能

从浏览器中创建 XMLHttpRequest
从 node.js 中创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换 JSON 数据
客户端支持防止 XSRF 攻击

流量器支持

Web开发框架-VUE使用Axios调用后台WebAPI接口

Axios面向现代浏览器设计，所以古老的浏览器并不支持。

因为axios设计简洁，API简单，支持浏览器和node，所以大受欢迎。它能很好的与各种前端框架整合。

Axios优点

1. 支持node端和浏览器端，同样的API，node和浏览器全支持，平台切换无压力。

2.支持 Promise，使用Promise管理异步，告别传统callback方式。

3.丰富的配置项，支持拦截器等高级配置。

4.社区支持，axios相关的npm包数量一直在增长。

Promise API

Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

通俗讲，Promise是一个许诺、承诺,是对未来事情的承诺，承诺不一定能完成，但是无论是否能完成都会有一个结果。

“生产者代码（producing code）

”会做一些事儿，并且会需要一些时间。例如，通过网络加载数据的代码。它就像一位“歌手”。

“消费者代码（consuming code）

”想要在“生产者代码”完成工作的第一时间就能获得其工作成果。许多函数可能都需要这个结果。这些就是“粉丝”。

Promise 是将“生产者代码”和“消费者代码”连接在一起的一个特殊的 JavaScript 对象。用我们的类比来说：这就是就像是“订阅列表”。“生产者代码”花费它所需的任意长度时间来产出所承诺的结果，而 “promise” 将在它（译注：指的是“生产者代码”，也就是下文所说的 executor）准备好时，将结果向所有订阅了的代码开放。