axios的详细用法以及后端接口代理
2024-09-28 03:07:34
安装
使用 npm:
$ npm install axios
或者 使用 bower:
$ bower install axios
或者直接使用 cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
main.js设置如下
引入axios
import axios from 'axios'
挂载到vue的原型
Vue.prototype.$http = axios
在webpack.config.js（config—>index.js）文件里设置代理 注意 新版文件会有修改
dev: {
env: require('./dev.env'),
port: 8080, //设置访问的端口号
autoOpenBrowser: true, //自动打开浏览器
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://10.10:8063', //设置调用接口域名和端口号别忘了加http
changeOrigin: true,
pathRewrite: {
'^/api': '/' //这里理解成用‘/api’代替target里面的地址，组件中我们调接口时直接用/api代替
// 比如我要调用'http://0.0:300/user/add'，直接写‘/api/user/add’即可 代理后地址栏显示/
}
}
}
执行 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) {
// 两个请求现在都执行完成
}));
创建实例
可以使用自定义配置新建一个 axios 实例
axios.create([config])
var instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
最新文章
- monkeyrunner之电脑安装驱动（五）
- BZOJ2730——[HNOI2012]矿场搭建
- 关于jquery中 跳出each循环的方法
- VC++6.0 显示行号
- 内核参数优化/etc/sysctl.conf
- tomcatserver解析（六）-- Acceptor
- 利用ckeditor 富文本编辑插件静态化网页
- Twitter的分布式系统中ID生成方法——Snowflake
- jsencrypt参数前端加密c#解密
- 书籍--嵌入式Linux驱动开发
- Extjs小总结
- Git世界历险记
- C#中使用打印日志
- C++基础学习一（基础之基础）
- Qt5.9一个简单的多线程实例（类QThread）（第一种方法）
- 学习笔记21—PS换图片背景
- 【Kafka】Kafka-配置参数详解-参数调优
- Hibernate JavaBean.hbm.xml配置
- 递归方程T(n)=aT(n/b)+f(n)之通用解法
- nyoj905 卡片游戏