封装请求文件
import axios from 'axios';
import qs from 'qs'
import {
getStoragePrefix
} from '@/common/tool/index.js'
import {
Toast
} from 'vant';
const baseUrl = "http://localhost:8000";
const instance = axios.create({
baseURL: baseUrl,
timeout: 15000,
// Authorization:""
});
// 添加请求拦截器
instance.interceptors.request.use(function(config) {
// 在发送请求之前做些什么
//config.headers['platform'] = 1
// if (store.getters.loginInfo.token || localStorage.getItem('shobby_web_token')) {
//config.headers['Access-Token'] = localStorage.getItem(getStoragePrefix("token"))
// }
return config;
}, function(error) {
Toast({
position: "bottom",
message: 'The request failed to send!'
});
return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function(response) {
// 对响应数据做点什么
return response;
}, function(error) {
Toast({
position: "bottom",
message: 'Data response failed!'
});
// 对响应错误做点什么
return Promise.reject(error);
});
/**
* 封装get方法
* @param url
* @param data
* @returns {Promise}
*/
export function get(url, params, complete) {
return new Promise((resolve, reject) => {
instance.get(url, {
params: params
})
.then(response => {
complete();
resolve(response);
})
.catch(err => {
complete();
reject(err)
Toast({
position: "bottom",
message: 'Data response failed!'
});
})
}).then(errorMsg)
}
/**
* 封装post请求
* @param url
* @param data
* @returns {Promise}
*/
export function post(url, data, complete) {
return new Promise((resolve, reject) => {
instance.post(url, data)
.then(response => {
complete();
resolve(response);
}, err => {
complete();
reject(err)
Toast({
position: "bottom",
message: 'Data response failed!'
});
})
}).then(errorMsg)
}
/**
* 封装postJson请求
* @param url
* @param data
* @returns {Promise}
*/
export function postJson(url, data, complete) {
return new Promise((resolve, reject) => {
instance.post(url, qs.stringify(data), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
}
})
.then(response => {
complete();
resolve(response);
}, err => {
complete();
reject(err)
Toast({
position: "bottom",
message: 'Data response failed!'
});
})
}).then(errorMsg)
}
/**
* @param {Object} response自定义错误信息
*/
function errorMsg(response) {
console.log(response)
return new Promise((resolve, reject) => {
if (response.status === 200) {
if (response.data.code != 200) {
Toast({
position: "bottom",
message: response.data.message
});
reject(response)
} else {
resolve(response.data);
}
} else {
Toast({
position: "bottom",
message: 'Data response failed!'
});
reject(response)
}
})
}
全局引用
import {get,post,postJson} from './common/http'
Vue.prototype.$get = get
Vue.prototype.$post = post
Vue.prototype.$postJson = postJson
调用
this.$post(接口, 参数, function() {
//这里是无论成功或者失败都会执行的方法
}).then(function(res) {
//请求成功 返回数据
}, (err) => {
//请求失败 执行其他操作
})