详解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 相关文章推荐
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
Nov 02 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 Javascript
vue接入腾讯防水墙代码
May 07 Javascript
react中hook介绍以及使用教程
Dec 11 Javascript
vue实现树状表格效果
Dec 29 Vue.js
如何使用JavaScript策略模式校验表单
Apr 29 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获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
Bootstrap风格的WPF样式
2016/12/07 Javascript
详解webpack介绍&amp;安装&amp;常用命令
2017/06/29 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
Python中if __name__ == '__main__'作用解析
2015/06/29 Python
python实现的系统实用log类实例
2015/06/30 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
用Cython加速Python到“起飞”(推荐)
2019/08/01 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
日本最新流行服饰网购:Nissen
2016/07/24 全球购物
印度电子产品购物网站:Vijay Sales
2021/02/16 全球购物
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
人民调解员培训方案
2014/06/05 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers
python blinker 信号库
2022/05/04 Python
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL