1.配置axios，qs
npm install axios --save
npm install qs
1.1main.js引入
import 'amfe-flexible'
import store from './store/store.js'
2.在src文件夹下面新建request文件夹，在request文件夹里面新建api.js，http.js，base.js
2.1http.js
// 在http.js中引入axios
import axios from 'axios'; // 引入axios
import { Message } from "element-ui";
import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，后面会提到
import store from '../store/store'
import base from './base'
import { bus } from './api'
// 通过axios.defaults.timeout设置默认的请求超时时间。例如超过了10s，就会告知用户当前请求超时，请刷新等。
// post请求的时候，我们需要加上一个请求头，所以可以在这里进行一个默认的设置，即设置post的请求头为application/x-www-form-urlencoded;charset=UTF-8
const instance = axios.create({
baseURL: base.sq,
timeout: 1000,
headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}
});
// 请求拦截器
// 每次发送请求之前判断vuex中是否存在token
// 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
// 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
instance .interceptors.request.use(
config => {
const token = sessionStorage.getItem("token");
token && (config.headers.Authorization = token);
// const token = store.state.token;
// console.log(store.state.token)
// token && (config.headers.Authorization = token);
store.state.loading = true;
return config;
},
error => {
console.log('请求超时，请稍后重试！')
return Promise.error(error);
}
);
// 添加一个响应拦截器
instance .interceptors.response.use(
// 请求成功
res => {
store.state.loading = false;
// 返回的状态码
// console.log(res.data , res.data.status)
if (res.data && res.data.status) {
if (parseInt(res.data.status) === 401) {
//未登录
Message({
showClose: true,
message: "请登录...",
type: "error",
duration: 2000
});
setTimeout(function(){
bus.$emit('goto', '/login')
},2000);
}else if (parseInt(res.data.status) === 402){
Message({
showClose: true,
message: res.data.err,
type: "error",
duration: 2000
});
}
}
return res;
// res.status === 200 ? Promise.resolve(res) : Promise.reject(res),
},
// 请求失败
error => {
const {
response
} = error;
if (response) {
// 请求已发出，但是不在2xx的范围
if (error.response.status == '400' || error.response.status == '404') {
Message({
showClose: true,
message: "请求方式出错",
type: "error",
duration: 2000
});
} else if (error.response.status == '403') {
Message({
showClose: true,
message: '您没有此权限',
type: "error",
duration: 2000
});
} else if (error.response.status == '402') {
Message({
showClose: true,
message: '登录失败，请检查账号密码！',
type: "error",
duration: 2000
});
}
store.state.loading = false
// Do something with response error
return Promise.reject(error);
} else {
// 处理断网的情况
// eg:请求超时或断网时，更新state的network状态
// network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
// 关于断网组件中的刷新重新获取数据，会在断网组件中说明
Message({
showClose: true,
message: '断网了,请检查网络链接',
type: "error",
duration: 2000
});
}
}
);
/**
* 封装get方法
* @param url
* @param params
* @returns {Promise}
*/
export function get(url, params) {
return new Promise((resolve, reject) => {
instance.axios.get(`${url}`, {
params: params
})
.then(res => {
resolve(res);
})
.catch(err => {
reject(err)
})
})
}
/**
* 封装post请求
* @param url
* @param params
* @returns {Promise}
*/
export function post(url, params) {
return new Promise((resolve, reject) => {
instance.axios.post(`${url}`, QS.stringify(params))
.then(res => {
resolve(res);
}, err => {
reject(err)
})
})
}
/**
* 封装patch请求
* @param url
* @param params
* @returns {Promise}
*/
export function patch(url, params) {
return new Promise((resolve, reject) => {
instance.axios.patch(`${url}`, QS.stringify(params))
.then(res => {
resolve(res);
}, err => {
reject(err)
})
})
}
/**
* 封装put请求
* @param url
* @param params
* @returns {Promise}
*/
export function put(url, params) {
return new Promise((resolve, reject) => {
instance.axios.put(`${url}`, QS.stringify(params))
.then(res => {
resolve(res);
}, err => {
reject(err)
})
})
}
2.2api.js
import Vue from 'vue'
import axios from 'axios'
import {get,post,fetch,patch,put} from './http'
//定义全局变量
Vue.prototype.$get=get;
Vue.prototype.$post=post;
Vue.prototype.$patch=patch;
Vue.prototype.$put=put;
/**
* api接口统一管理
*/
// 获取token跳转页面
export const bus = new Vue();
//bus是判断无token情况下请求数据，会跳转登录页面方法在http.js下面的$emit，$on设置在index.vue或者app.vue里面都可以
//$on
created(){
bus.$on('goto', (url) => {
if (url === "/login") {
sessionStorage.removeItem('token');
}
this.$router.push(url);
})
},
// get
export const tTable = data => get('/table', data);
// post
export const Terrar = data => post('/errar', data);
2.3base.js
/**
* 接口域名的管理
*/
const base = {
sq: 'https://www.xxxxx.com/api ',
}
export default base
