详解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 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
JavaScript写的一个DIV 弹出网页对话框
Aug 14 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
Dec 11 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
JavaScript中的连续赋值问题实例分析
Jul 12 Javascript
JavaScript如何判断对象有某属性
Jul 03 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 Class&amp;Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
PDO::inTransaction讲解
2019/01/28 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
JS创建自定义表格具体实现
2014/02/11 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
分析python服务器拒绝服务攻击代码
2014/01/16 Python
python统计cpu利用率的方法
2015/06/02 Python
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
python使用rsa非对称加密过程解析
2019/12/28 Python
关于初始种子自动选取的区域生长实例(python+opencv)
2020/01/16 Python
python 简单的调用有道翻译
2020/11/25 Python
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
大学本科毕业生的自我鉴定
2013/11/26 职场文书
人力资源经理自我评价
2014/01/04 职场文书
学生手册家长评语
2014/02/10 职场文书
静心口服夜广告词
2014/03/20 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电