详解axios 全攻略之基本介绍与使用(GET 与 POST)


Posted in Javascript onSeptember 15, 2017

axios

axios 是一个基于 Promise 的 HTTP 客户端,专门为浏览器和 node.js 服务

Vue 2.0 官方推荐使用 axios 来代替原来的 Vue request,所以这里介绍一下 axios 的功能和基本的使用方法,希望能够对各位所有帮助。^_^

功能

  • 在浏览器中发送 XMLHttpRequests 请求
  • 在 node.js 中发送 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换 JSON 数据格式
  • 客户端支持防范 XSRF 攻击

浏览器支持

axios 能够支持 IE7 以上的 IE 版本,同时能够支持大部分主流的浏览器,需要注意的是,你的浏览器需要支持 Promise,才能够使用 axios。所以比较好的做法是先安装 polyfill,然后再使用 axios。

安装

Using npm:

$ npm install axios

Using bower:

$ bower install axios

Using cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

使用

这里以 Vue 为例:在 NPM 中安装 axios 之后,需要在 main.js 文件中引用 package

import axios from 'axios'

然后全局绑定

Vue.prototype.$http = axios

然后可以在 .vue 文件中使用 $http 来代替 axios

GET

// Make a request for a user with a given ID 
axios.get('/user?ID=12345')
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

// Optionally the request above could also be done as 
axios.get('/user', {
  params: {
   ID: 12345
  }
 })
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

POST

axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
 })
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

同时发送多个请求

function getUserAccount() {
 return axios.get('/user/12345');
}

function getUserPermissions() {
 return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
 .then(axios.spread(function (acct, perms) {
  // Both requests are now complete 
 }));

当然,axios 的功能还包括 axios API、interceptor 等等,这里想要详细了解的可以查看官方文档:axios,后面陆续会介绍下 interceptor 的使用和各类参数的配置。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
Bootstrap每天必学之警告框插件
Apr 26 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
Nov 30 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 #Javascript
vue实现登陆登出的实现示例
Sep 15 #Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 #Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 #jQuery
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 #Javascript
vue用addRoutes实现动态路由的示例
Sep 15 #Javascript
Vue渲染函数详解
Sep 15 #Javascript
You might like
社区(php&amp;&amp;mysql)六
2006/10/09 PHP
聊天室php&amp;mysql(二)
2006/10/09 PHP
在PHP中使用反射技术的架构插件使用说明
2010/05/18 PHP
php在文件指定行中写入代码的方法
2012/05/23 PHP
xml在joomla表单中的应用详解分享
2012/07/19 PHP
php判断表是否存在的方法
2015/06/18 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
JS访问SWF的函数用法实例
2015/07/01 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
vue.js中实现登录控制的方法示例
2018/04/23 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
Python编程实现蚁群算法详解
2017/11/13 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
Wojas罗马尼亚网站:波兰皮鞋品牌
2018/11/01 全球购物
生育关怀行动实施方案
2014/03/26 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
小学总务工作总结
2015/08/13 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
使用Django实现商城验证码模块的方法
2021/06/01 Python
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers