24-Vue axios基本使用

这一篇主要针对Vue第三方网络请求库函数的使用,重点在于不同的使用方法之间的区别和联系,以及如何在Vue中引入第三方库文件

image.png

image.png

https://curated.vuejs.org/module/github_com::mzabriskie::axios
https://www.kancloud.cn/yunye/axios/234845

0.重点

node.js
Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。 ^[1] 发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。

Node对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快，性能非常好。 ^[2] Node是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node 使用事件驱动， 非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。
------百度百科
简单的说就是让JS运行在服务端的开发平台

一.Vue发送网络请求的三种方法

1.还是可以使用以前的jQuery/zepto等,但是不推荐
2.使用Vue官方提供的网络请求库:vue-source 停止更新
3.推荐使用axios.js库,这个框架也是Vue官方现在推荐使用的

二.axios的特性

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF
  -------Axios中文说明
  其中,拦截请求和响应的意思,就是指可以在发送请求前显示提示内容或者说是执行一些操作,在发送请求成功后,隐藏提示内容或者说是执行一些操作

三.axios请求常用方法

在从github下载axios.js文件后,将dist文件夹下的文件复制到js文件夹下

image.png

image.png

二.axios并发请求

顾名思义,并发请求就是一次想多个服务器请求资源,如果请求都成功,就获取得到的数据

image.png

三.axios通过传入对象发送

image.png

四.自定义axios实例

用于存储一些公共信息,因为在项目部署前后的url请求资源的地址会变化,为了方便修改这种变化,我们给axios设置全局的URL

1.自定义一个axios实例
2.利用自定义axios实例发送请求
注意点:配置baseURL最好以" / "结尾,发送请求最好不要一" / "结尾和开头,开头会错认为相对路径(当前文件夹下的文件),结尾会错认为下面还有文件

image.png

五.设置全局axios默认值

使用场景和创建axios实例一样,方便服务器地址的修改

image.png

image.png