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