锐客网

  1. 首页 > it技术 > >

24-Vue|24-Vue axios基本使用

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

24-Vue|24-Vue axios基本使用
文章图片
image.png
24-Vue|24-Vue axios基本使用
文章图片
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发送网络请求的三种方法
【24-Vue|24-Vue axios基本使用】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文件夹下
24-Vue|24-Vue axios基本使用
文章图片
image.png
24-Vue|24-Vue axios基本使用
文章图片
image.png 二.axios并发请求
顾名思义,并发请求就是一次想多个服务器请求资源,如果请求都成功,就获取得到的数据

24-Vue|24-Vue axios基本使用
文章图片
image.png 三.axios通过传入对象发送
24-Vue|24-Vue axios基本使用
文章图片
image.png 四.自定义axios实例
用于存储一些公共信息,因为在项目部署前后的url请求资源的地址会变化,为了方便修改这种变化,我们给axios设置全局的URL
1.自定义一个axios实例
2.利用自定义axios实例发送请求
注意点:配置baseURL最好以" / "结尾,发送请求最好不要一" / "结尾和开头,开头会错认为相对路径(当前文件夹下的文件),结尾会错认为下面还有文件

24-Vue|24-Vue axios基本使用
文章图片
image.png
五.设置全局axios默认值
使用场景和创建axios实例一样,方便服务器地址的修改
24-Vue|24-Vue axios基本使用
文章图片
image.png
24-Vue|24-Vue axios基本使用
文章图片
image.png

    推荐阅读


    上一篇：《赴宴之前》（人性阴暗面窥视者毛姆）

    下一篇：iOS提交TestFlight测试显示缺少合规证明