axios基本入门用法教程


Posted in Javascript onMarch 25, 2017

这篇文章主要给大家介绍了axios基本入门用法教程,下面话不多说,来看看详细的介绍吧。

首先就是引入axios,如果你使用es6,只需要安装axios模块之后

import axios from 'axios';
//安装方法
npm install axios
//或
bower install axios

当然也可以用script引入

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

axios提供了一下几种请求方式

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

这里的config是对一些基本信息的配置,比如请求头,baseURL,当然这里提供了一些比较方便配置项

//config
import Qs from 'qs'
{
 //请求的接口,在请求的时候,如axios.get(url,config);这里的url会覆盖掉config中的url
 url: '/user',

 // 请求方法同上
 method: 'get', // default
 // 基础url前缀
 baseURL: 'https://some-domain.com/api/',




 transformRequest: [function (data) {
 // 这里可以在发送请求之前对请求数据做处理,比如form-data格式化等,这里可以使用开头引入的Qs(这个模块在安装axios的时候就已经安装了,不需要另外安装)

data = Qs.stringify({});
 return data;
 }],

 transformResponse: [function (data) {
 // 这里提前处理返回的数据

 return data;
 }],

 // 请求头信息
 headers: {'X-Requested-With': 'XMLHttpRequest'},

 //parameter参数
 params: {
 ID: 12345
 },

 //post参数,使用axios.post(url,{},config);如果没有额外的也必须要用一个空对象,否则会报错
 data: {
 firstName: 'Fred'
 },

 //设置超时时间
 timeout: 1000,
 //返回数据类型
 responseType: 'json', // default

 
}

有了配置文件,我们就可以减少很多额外的处理代码也更优美,直接使用

axios.post(url,{},config)
 .then(function(res){
  console.log(res);
 })
 .catch(function(err){
  console.log(err);
 })
//axios请求返回的也是一个promise,跟踪错误只需要在最后加一个catch就可以了。
//下面是关于同时发起多个请求时的处理

axios.all([get1(), get2()])
 .then(axios.spread(function (res1, res2) {
 // 只有两个请求都完成才会成功,否则会被catch捕获
 }));

最后还是说一下配置项,上面讲的是额外配置,如果你不想另外写也可以直接配置全局

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

//当然还可以这么配置
var instance = axios.create({
 baseURL: 'https://api.example.com'
});

本文只是介绍基本的用法,详细看官方文档:https://github.com/axios

两个例子分享给大家:

使用vue2.0+mintUI+axios+vue-router:https://github.com/Stevenzwzhai/vue-mobile-application

使用vue2.0+elementUI+axios+vue-router:https://github.com/Stevenzwzhai/vue2.0-elementUI-axios-vueRouter

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery animate图片模向滑动示例代码
Jan 26 Javascript
myeclipse安装jQuery插件的方法
Mar 29 Javascript
jquery实现的导航固定效果
Apr 28 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 Javascript
理解JS事件循环
Jan 07 Javascript
js实现页面a向页面b传参的方法
May 29 Javascript
JS实现的抛物线运动效果示例
Jan 30 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 Javascript
vue prop属性传值与传引用示例
Nov 13 Javascript
Vue 同步异步存值取值实现案例
Aug 05 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 #Javascript
ECMAScript6 新特性范例大全
Mar 24 #Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 #Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 #jQuery
Node.js和Express简单入门介绍
Mar 24 #Javascript
js鼠标经过tab选项卡时实现切换延迟
Mar 24 #Javascript
详解angular2实现ng2-router 路由和嵌套路由
Mar 24 #Javascript
You might like
类的另类用法--数据的封装
2006/10/09 PHP
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
简明json介绍
2008/09/28 Javascript
拖拉表格的JS函数
2008/11/20 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
微信小程序自定义模态对话框实例详解
2017/08/16 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
React中Ref 的使用方法详解
2020/04/28 Javascript
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
python创建线程示例
2014/05/06 Python
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
python制作图片缩略图
2019/04/30 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
Python如何批量获取文件夹的大小并保存
2020/03/31 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
奥地利网上书店:Weltbild
2017/07/14 全球购物
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
安全生产检讨书
2014/01/21 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
2014年人事科工作总结
2014/11/19 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL