记 Vue +axios 使用和http请求封装

1.安装axios
$ npm install axios

文档：https://github.com/axios/axios
2.新建service文件夹，新建http.js引入axios，对http请求做统一配置
import http from 'axios'

// config http
let baseUrl = '';
if (process.env.NODE_ENV === 'development') {
baseUrl = 'http://...'
} else if (process.env.NODE_ENV === 'production') {
baseUrl = 'http://...'
}
http.defaults.baseURL = baseUrl

// http.defaults.timeout = 2500
http.defaults.headers.post['Content-Type'] = 'application/json'
// cache-control: "max-age=0, private, must-revalidate"
// http.defaults.headers.post['Cache-control'] = 'max-age=5'

// Add a request interceptor 解决ie下url带中文参数乱码问题
http.interceptors.request.use(function (config) {
// Do something before request is sent
if(config.method == 'get'){
config.url = encodeURI(config.url);
}
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});

// Add a response interceptor
http.interceptors.response.use(function (response) {
// Do something with response data
return response;
}, function (error) {
// Do something with response error
if(error.response){
if(error.response.status === 400 ){
window.app.$message.error('数据错误！');
}
else if(error.response.status === 401 ){
// define window.app=vm in main.js
window.app.$router.push({name: 'Login'});
}
else if(error.response.status === 403 ){
window.app.$message.error('您没有操作权限哦！');
}
else if(error.response.status === 404 ){
window.app.$message.error('对象不存在！');
}
else if(error.response.status === 500 ){
window.app.$message.error('服务器发生了一些错误哦！');
}
}
return Promise.reject(error);
});

export default http
3.http请求封装，新建request.js,这里只列举了几个请求方式，其他的类似
/*
* success : 请求成功执行的函数
* fail：请求失败执行的函数
*
* */

import http from './http';

//有的请求需要用户认证，视情况而定
const getConfig = function (auth) {
let config = {}
if(auth){
config.headers={
"Authorization": auth
}
}
return config;
}

var request = {
get:function (url,auth,success,fail) {
return http.get(url,getConfig(auth))
.then(function (res) {
success(res);
})
.catch(function (error) {
if(fail){
fail(error);
}
console.log(error);
})
},
post:function (url,data,auth,success,fail) {
return http.post(url,data,getConfig(auth))
.then(function (res) {
success(res);
})
.catch(function (error) {
if(fa
99db
il){
fail(error);
}
console.log(error);
})
},
put:function (url,data,auth,success,fail) {
return http.put(url,data,getConfig(auth))
.then(function (res) {
success(res);
})
.catch(function (error) {
if(fail){
fail(error);
}
console.log(error);
})
},
}
export default request;

3.全局引用request.js
在main.js里面
//定义全局方法
import request from './services/request'
Vue.prototype.$request = request;4.全局使用举例，在vue文件中
this.$request.get(`${basis.userListUrl}`, false,
function (res) {
// console.log(res.data);
}
)

this.$request.post(`${basis.userListUrl}`,data,this.$localStorage.get('token'),
function (res) {
// console.log(res.data);
}
)

basis.userListUrl 即为请求url,习惯将请求url单独拿出来，方便统一管理