axios 全攻略之基本介绍与使用(GET 与 POST)
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 的使用和各类参数的配置。
axios 全攻略之基本介绍与使用(GET 与 POST)的更多相关文章
- axios全攻略
随着 vuejs 作者尤雨溪发布消息,不再继续维护vue-resource,并推荐大家使用 axios 开始,axios 被越来越多的人所了解.本来想在网上找找详细攻略,突然发现,axios 的官方文 ...
- vue axios全攻略
不再继续维护vue-resource,并推荐大家使用 axios 开始,axios 被越来越多的人所了解.本来想在网上找找详细攻略,突然发现,axios 的官方文档本身就非常详细!!有这个还要什么自行 ...
- 【转】axios全攻略
随着 vuejs 作者尤雨溪发布消息,不再继续维护vue-resource,并推荐大家使用 axios 开始,axios 被越来越多的人所了解.本来想在网上找找详细攻略,突然发现,axios 的官方文 ...
- Retrofit全攻略——进阶篇
最近事比较多,距离上次写文章已经过去了一个月了.上一篇文章Retrofit全攻略——基础篇 介绍了Retrofit的基础用法,这篇文章介绍点进阶的用法. 打印网络日志 在开发阶段,为了方便调试,我们需 ...
- 【C#代码实战】群蚁算法理论与实践全攻略——旅行商等路径优化问题的新方法
若干年前读研的时候,学院有一个教授,专门做群蚁算法的,很厉害,偶尔了解了一点点.感觉也是生物智能的一个体现,和遗传算法.神经网络有异曲同工之妙.只不过当时没有实际需求学习,所以没去研究.最近有一个这样 ...
- 从小工到专家 ——读《Java程序员职场全攻略》有感
从小工到专家 ——读<Java程序员职场全攻略>有感 <Java程序员职场全攻略>是以故事的形式,向读者介绍Java程序员的职场经验.作者牛开复在北京从事软件开发,已经是一 ...
- 用C#制作PDF文件全攻略
用C#制作PDF文件全攻略 目 录 前 言... 3 第一部分 iText的简单应用... 4 第一章 创建一个Document 4 第一步 创建一个Document实例:... 5 第二步 ...
- Android-x86虚拟机安装配置全攻略
转自Android-x86虚拟机安装配置全攻略 注:这里安装从简,具体请参考虚拟机Vmware安装运行安卓4.0详细教程 Android-x86虚拟机安装配置网上有很多,但是全部说明白的确不多,希望这 ...
- 【转】Perl Unicode全攻略
Perl Unicode全攻略 耐心看完本文,相信你今后在unicode处理上不会再有什么问题. 本文内容适用于perl 5.8及其以上版本. perl internal form 在Perl看来, ...
随机推荐
- 14招搞定JavaScript调试
14招搞定JavaScript调试 译者按: 很多时候,大家可能只是依靠console.log来调试JavaScript代码,这样做的局限性不言而喻,这篇博客将教你几招实用的调试技巧. 原文: The ...
- LeetCode.884-两句话中不常见的单词(Uncommon Words from Two Sentences)
这是悦乐书的第338次更新,第362篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第207题(顺位题号是884).我们给出了两个句子A和B.(一个句子是一串空格分隔的单词 ...
- 5.26 Quartz任务调度图解
- 【Oracle】append
我们在生产环境中经常遇到需要往表中插入大量数据的情况,怎么样才能让插入数据的速度变快呢?Oracle中的append简直就是神器!!没图说个**,直接上图: 是不是看晕了?哈哈,莫慌,请看下面总结: ...
- 【Oracle】体系结构
1. 理解实例和数据库 ☞ 实例是一组后台进程和共享内存 ☞ 数据库是磁盘上存储的数据集合 ☞ 实例“一生”只能装载并打开一个数据库 ☞ 数据库可以由一个或多个实例(RAC)装载和打开 [oracle ...
- 用JSP实现动态交互
一.什么是JSP? 1.在HTML中嵌入Java脚本代码 2.由应用服务器中的JSP引擎来编译和执行嵌入的Java脚本代码 3.然后将生成的整个页面信息返回给客户端 二.为什么需要基于B/S技术的 ...
- 分块编码(Transfer-Encoding: chunked)VS Content-length
参考链接: HTTP 协议中的 Transfer-Encoding 分块传输编码 https://www.cnblogs.com/xuehaoyue/p/6639029.html 一.背景: 持续连接 ...
- react新版本生命周期
给componentWillMount componentWillReceiveProps componentWillUpdate生命周期加上UNSAFE_前缀,表明其不安全性,并将在未来版本将其移除 ...
- js数组对象去重
转: https://www.cnblogs.com/gaoht/p/9850449.html 在数组对象中去掉重复的对象: export function deteleObject(obj) { v ...
- nyoj169-素数
ms | 内存限制:65535 KB 难度:1 描述 走进世博园某信息通信馆,参观者将获得前所未有的尖端互动体验,一场充满创想和喜悦的信息通信互动体验秀将以全新形式呈现,从观众踏入展馆的第一步起, ...