axios
2018-09-19 02:51:28来源：博客园 阅读 ()
最近通过 Vuejs 重构旅游页面项目使用到 axios 获取数据。对照官方文档，简要记录一些 axios 的使用方法和特性，方便日后参考和查阅。
axios
基于 promise 用于浏览器和 node.js 的 http 客户端
安装
npm 安装
npm install axios
通过 cdn 引入
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script>
用法
执行 GET 请求
// 为给定 ID 的 user 创建请求 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 可选地，上面的请求可以这样做 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) { // 两个请求现在都执行完成 }));
其他
设置 mock数据 开发环境转发代理
在 Vue-cli 脚手架工具之下
设置 config 文件夹下的 index.js
设置 module.exports 下 dev 的 proxyTable 代理
webpack-dev-server 工具会自动将 /api 替换成 /static/mock
从而达到不用改动项目代码的目的
proxyTable: { '/api': { target: 'http://localhost:8080', pathRewrite: { '^/api': '/static/mock' } } }
参考
axios 全攻略
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：前端面试详解
- Vue input控件通过value绑定动态属性及修饰符的方法 2020-03-05
- 高效的获取当前元素是父元素的第几个子元素 2020-02-15
- textarea不能通过maxlength属性来限制字数的解决方法 2019-12-21
- 浏览器上实现右键菜单的方法 2019-10-25
- JavaScript通过URL传递汉字的实现方法 2019-09-30
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
