Axios(Vue-Resource的取代者、拦截器)

axios简述

老样子,先了解背景,再学习使用
虽然看不懂,但还是了解一下的Axios git仓库

Axios是干啥使的

  • Axios是一个基于Promise的Http库,可以用在浏览器和node.js中
  • Axios是一个开源的可以用在浏览器端和NodeJS的异步通信框架,它的主要作用就是实现AJAX异步通信
  • 为啥要用它,因为Vue的边界很明确,就是为了处理DOM,所以并不具备通信功能,此时就需要使用一个额外的通信框架与服务器交互,当然也可以使用jQuery提供的AJAX通信功能
  • 简单来说,Axios就是可以发送get、post请求

Axios功能特点

  • 从浏览器中创建XMLHttpRequests
  • 从node.js创建http请求
  • 支持Promise API【JS中链式编程】
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防御XSRF(跨站请求伪造)

传统AJAX & jQuery & Vue-Resource

其实在Vue开发过程中能实现发送网络请求的方式有很多种,为什么最终选择了Axios呢,当然是由于它过于优秀,同时也因为队友并不怎么给力啊

  • 传统Ajax请求是基于XMLHttpRequest
    而在项目开发中,封装它的过程是比较麻烦的,并且配置和调用的方式也比较混乱,一般开发者都不会用这种方式,而是使用jQuery-Ajax
  • jQuery-Ajax相对于传统的Ajax是好用的
    但是存在的问题是,Vue的开发过程中不需要使用jQuery,而且jQuery是一个不那么小的,比较重量级的框架,而为了方便进行一个网络请求,特意引入一个jQuery是非常没有必要的,也是不划算的
  • Vue-Resource
    尤同学曾经推出了Vue-resource插件,Vue-Resource的体积相对于jQuery小了很多,但当Vue2.0版本推出后,尤同学说以后将不会再对Vue-Resource进行维护和更新了,所以说继续使用这种方式进行开发项目是存在很大隐患的。
  • Axios
    Axios也是尤同学说不再维护Vue-Resource后推荐使用的框架,它支持再浏览器中发送XMLHttpRequests请求,支持在Node.js中发送http请求,支持Promise API,可以拦截请求和响应,反正呢,就是目前最厉害的了。

Axios基础使用(基于json-server)

准备工作

  • 一如既往,使用命令行创建项目工程
    在这里插入图片描述
  • 开发工具WebStrom打开,修改项目目录结构
    在这里插入图片描述

安装

  • 本地安装axios
    在这里插入图片描述
  • 安装vue-axios
    因为在Vue中使用,所以光安装axios是不够用的,还需要再额外安装一个vue-axios
    在这里插入图片描述

开始使用

本次使用也是使用json-server来模拟数据的,所以使用json-server部分与vue-resource中的一致

怕你懒得翻,所以还是再说一遍
上次在Vue-Resource中使用的是全局安装,所以本次就不需要再安装一次了
在这里插入图片描述

好了,启动完json-server我们就开始用了。

直接使用(局部使用)

App.vue中的script部分直接使用
在这里插入图片描述
与Vue-Resource的使用方式类似,但是我们可以看到的是数据存储在data里,而Vue-Resource数据存储在body里
App.vue的template部分
在这里插入图片描述

全局引用

  • main.js中引入Axios和vue-axios
    在这里插入图片描述
  • main.js中创建Axios实例并安装使用
    在这里插入图片描述
    !!!注意Vue.use安装的是VueAxios而不是Axios,因为写错这个问题坑了我好久
  • App.vue里script使用有两种方式,推荐第二种
    方式1:
    在这里插入图片描述
    方式2:
    在这里插入图片描述

实践

做个弹窗,完成新增用户功能

  • App.vue的template在上述的基础上新增
    在这里插入图片描述
  • App.vue上script部分对按钮点击后的操作
    在这里插入图片描述

Axios的拦截器使用

Axios比较显著的优点就是它的拦截器很好用,可以在方法之前和方法之后进行拦截

  • main.js中添加代码进行使用
    前置拦截
    在这里插入图片描述
    后置拦截
    在这里插入图片描述

运行后结果如下:
在这里插入图片描述

项目结构改进

当前我们可以看到给main.js里添加了不少代码,因为拦截器的缘故
所以可以效防在vue路由里对项目结构的改进,将关于拦截器的部分,单独写入一个文件,然后在main.js里引入
在这里插入图片描述

  • axios/index.js的内容
    在这里插入图片描述
  • main.js里引入
    在这里插入图片描述
    可以看到main.js里的代码简洁了不少
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 设计师:Dean_xiu 返回首页