vue中使用axios进行http通信

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