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 成为与PHPPythonPerlRuby 等服务端语言平起平坐的脚本语言[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
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 2,142评论 0 2
  • # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 3,695评论 0 6
  • Node.js第一天 1. 初识Node.js 1.1 Node.js是什么 Node.js® is a Java...
    再见天才阅读 4,813评论 1 24
  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 3,028评论 1 4
  • PS:转载请注明出处作者: TigerChain地址: https://www.jianshu.com/p/218...
    TigerChain阅读 26,370评论 5 70