vue中使用axios进行http通信
2024-08-30 11:59:44
1.安装
npm install axios
2.在main.js中全局注册
// axios不可以通过use引入,可以通过修改vue原型链
import axios from 'axios'
Vue.prototype.$ajax = axios
3.在组件中使用(方法一)
// .then .catch拥有各自独立的作用域,在后面添加.bind(this)可以使this指向组件实例
this.$ajax.post('/dnalims/svc/loaddict', data).then(function(res) {
console.log(res)
}.bind(this))
4.在组件中使用(方法二)
建立axios参数配置文件,axiosConfig.js
import Qs from 'qs'
export default {
serviceConfig: {
//请求的接口,在请求的时候,如axios.get(url,config);这里的url会覆盖config中的url
url: '/',
//请求方法同上
method: 'POST',
//基础url前缀
baseURL: '/dnalims/svc/',
withCredentials: true,
//请求头信息
headers: {
// 'X-Requested-width': 'XMLHTTPRequest'
},
//post参数,使用axios.post(url,{},config);如果没有额外的也必须使用空对象,否则会报错
data: {
//默认空对象
},
//设置超时时间
timeout: 30000,
//返回数据类型
responseType: 'json', //default
} }
封装axios方法,axiosHttp.js
import axios from 'axios'
import config from './axiosConfig'
// 封装axios方法
function govue(api, data, callback) {
axios.post(api, data, config.serviceConfig).then(function (response) {
//回调成功
callback(response.data);
}).catch(function (response) {
//回调失败
console.log(response);
})
}
export {
govue
}
在组件中使用
let api = 'loaddict'
let data = '{"dict_category":"RELATION_WITH_TARGET"}'
govue(api, data, function(res){
console.log(res)
})
较为详细的axios讲解文章:http://www.cnblogs.com/yuqing6/p/6954114.html
最新文章
- 分享 rabbitMQ入门详解
- 为什么玩VR眼镜会头晕?
- android架构介绍
- WebSerivce测试工具 Storm
- 自定义的插件如何加载到Qt Designer中(详细)
- ECSHOP在商品详细页面上获取该商品的顶级分类id和名称
- Android实现网络多线程断点续传下载
- Kotlin——最详细的控制语句使用
- 《java.util.concurrent 包源码阅读》18 Exchanger
- redis的基本数据类型
- dubbo环境搭建
- Android SDK的下载与安装
- 23.Hibernate-基础.md
- [视频]K8飞刀 Google黑客功能教程
- 自学Aruba5.1-Aruba 基于角色(role)的策略管理(重点)
- oracle 12c新特性 FETCH FIRST、WITH TIES 关键字详解
- Hadoop概念学习系列之Hadoop集群动态增加新节点或删除已有某节点及复制策略导向 (四十三)
- Entity Framework 6.x - Code First 默认创建数据库的位置
- window对象方法之setTimeout(),setInterval()
- BZOJ2756 SCOI2012奇怪的游戏(二分答案+最大流)