最近通过 Vuejs 重构旅游页面项目使用到 axios 获取数据。对照官方文档,简要记录一些 axios 的使用方法和特性,方便日后参考和查阅。
axios
基于 promise 用于浏览器和 node.js 的 http 客户端
安装
npm 安装
npm install axios
通过 cdn 引入
< src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></ >
用法
执行 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' } } }
参考
继续阅读与本文标签相同的文章
-
零基础Python教程033期 循环中的else语句,感叹人生苦短,我学python
2026-05-18栏目: 教程
-
Python高级进阶#015 pyqt5进度条QProgressBar结合使用qbasictimer
2026-05-18栏目: 教程
-
Cassandra编年史
2026-05-18栏目: 教程
-
网站建设——部署与发布入门篇(基于阿里云服务器)
2026-05-18栏目: 教程
-
K8S从懵圈到熟练 - 节点下线姊妹篇
2026-05-18栏目: 教程
