详解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 showModalDialog,open取得父窗口的方法
Mar 10 Javascript
javascript面向对象之Javascript 继承
May 04 Javascript
JS小功能(button选择颜色)简单实例
Nov 29 Javascript
js+div实现文字滚动和图片切换效果代码
Aug 27 Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 Javascript
jQuery简单自定义图片轮播插件及用法示例
Nov 21 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
使用InstantClick.js让页面提前加载200ms
Sep 12 Javascript
node.js自动上传ftp的脚本分享
Jun 16 Javascript
JS字符串和数组如何实现相互转化
Jul 02 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创建动态图像
2006/10/09 PHP
php 团购折扣计算公式
2011/11/24 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
javascript显示选择目录对话框的代码
2008/11/10 Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
对Python中plt的画图函数详解
2018/11/07 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
python修改文件内容的3种方法详解
2019/11/15 Python
python3 logging日志封装实例
2020/04/08 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
退休教师欢送会主持词
2014/03/31 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
2014年保管员工作总结
2014/11/18 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL