1、安装axios
npm install axios --save
2、封装http.js
import axios from 'axios';
// import { Message } from 'element-ui';
axios.defaults.timeout = 5000;
axios.defaults.baseURL ='http://';
axios.defaults.headers.post["Content-Type"] = "application/json";
axios.defaults.headers.post["X-Requested-With"] = "XMLHttpRequest";
//http request 拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
export function Get(url,params={}){
return new Promise((resolve,reject) => {
axios.get(url,{
params:params
}).then(response => {
resolve(response.data);
}).catch(err => {
reject(err)
})
})
}
export function post(url,data = {}){
return new Promise((resolve,reject) => {
axios.post(url,data).then(function (response) {
resolve(response.data);
}).catch(function (error) {
reject(error)
});
})
}
3、在main.js引入方法
//引入请求数据方法
import {post,Get} from './http.js'
//定义全局变量
Vue.prototype.$post=post;
Vue.prototype.$Get=Get;
4、用法
如图所示,Get方法一样
this.$post('/checkList',{userid:this.$route.query.perid}).then((res) => {
console.log(res)
}, res => {
})