封装axios,带请求头和响应头
import axios from "axios"; import qs from "qs"; //处理参数 import router from '../router'; //引入路由 import { Loading, Message } from 'element-ui'; let loading = null; //开始加载动画 function openLoading() { loading = Loading.service({ lock: true, text: '拼命加载中...', background: 'rgba(0,0,0,.7)' }); } //关闭加载动画 function closeLoading() { loading.close(); } //添加请求拦截器 axios.interceptors.request.use( config => { //加载动画 openLoading() if (localStorage.sessionId) { //如果我的sessionId存在(sessionId其实就是token) // 设置统一的请求header config.headers.Authorization = localStorage.sessionId //授权(每次请求把sessionId带给后台) } return config; }, error => { return Promise.reject(error); } ); //添加响应拦截器 axios.interceptors.response.use( response => { //逻辑处理 if (response.data.errorCode == -1) { //后端反回的状态值,本应该errorCode是status Message({ type: 'warning', duration: 1500, showClose: true, message: '当前登录已失效,请从新登录!' }) router.push("/logon")//让用户从新回到登录页面 } return response; }, error => { closeLoading() //请求超时清除加载动画 return Promise.resolve(error.response); } ); axios.defaults.baseURL = "http://127.26.41.181:8081/nei"; // 开发 axios.defaults.headers.post["Content-Type"] = "application/json"; // axios.defaults.headers.post["X-Requested-With"] = "XMLHttpRequest"; axios.defaults.timeout = 6000; //设置请求超时时间 function checkStatus(response) { return new Promise((resolve, reject) => { if (response && (response.status === 200 || response.status === 304 || response.status === 400)) { try { closeLoading() //关闭加载动画 } catch (e) { //抛出异常 console.log(e) } resolve(response.data); } else { try { closeLoading() //关闭加载动画 } catch (e) { //抛出异常 console.log(e) } Message({ type: 'error', showClose: true, message: '网络异常,请检查网络连接是否正常!' }) } }); } export default { post(url, params) { return axios({ method: "post", url, data: params }).then(response => { return checkStatus(response); }); }, get(url, params) { params = qs.stringify(params); return axios({ method: "get", url, params }).then(response => { return checkStatus(response); }); } };
使用:在main.js里面引入这个文件,并挂载到vue原型上,这样可以通过this.xxxx去拿到
import axios from './api/api.js' //引入axios文件夹 Vue.prototype.$axios = axios; //挂载到整个Vue原型上
axios 的使用:在需要请求的页面如下引用
//post请求 this.$axios.post('url',{key:value}).then(res =>{ cons.log(res,'后端返回数据') }) //get请求 this.$axios.get('url?key=value').then(res =>{ cons.log(res,'后端返回数据') })