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的跨域调用文件
Nov 19 Javascript
jQuery 版元素拖拽原型代码
Apr 25 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
js 定义对象数组(结合)多维数组方法
Jul 27 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
如何为vuex实现带参数的 getter和state.commit
Jan 04 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
Jan 18 Javascript
小程序使用分包的示例代码
Mar 23 Javascript
JavaScript Array.flat()函数用法解析
Sep 02 Javascript
JavaScript实现4位随机验证码的生成
Jan 28 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
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
PHP保存Base64图片base64_decode的问题整理
2019/11/04 PHP
javascript的函数
2007/01/31 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
js与jQuery 获取父窗、子窗的iframe
2013/12/20 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
Vue.js开发环境搭建
2016/11/10 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
Python实现简易端口扫描器代码实例
2017/03/15 Python
Python实现的计算器功能示例
2018/04/26 Python
python中int与str互转方法
2018/07/02 Python
网易2016研发工程师编程题 奖学金(python)
2019/06/19 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
结束运行python的方法
2020/06/16 Python
详解python logging日志传输
2020/07/01 Python
大学毕业生个人自荐信范文
2014/01/08 职场文书
公司承诺书格式范文
2015/04/28 职场文书
社区文明倡议书
2015/04/28 职场文书
欢送领导祝酒词
2015/08/12 职场文书
25句企业管理语录:助你迅速打开思路,句句经典!
2020/01/14 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL
python中urllib包的网络请求教程
2022/04/19 Python