18--request.js

request.js
响应,比如token无效和服务器错误,会弹窗提示

import Vue from 'vue'
import axios from 'axios'
import Qs from 'qs'
// 引入内置的组件
import {Dialog} from 'cube-ui'
Vue.use(Dialog)
import {Toast} from 'cube-ui'
Vue.use(Toast)
const baseUrl = process.env.NODE_ENV === 'production' ? 'http://localhost/thinkphp5/public/index.php/api' : "/api"

const toast = Toast.$create({
	txt: 'Loading...',
	mask: true,
	time: 0
})
// 创建axios实例
var instance = axios.create({
	baseURL: baseUrl,
	transformRequest: [function(data, headers) {
		// 对 data 进行任意转换处理
		return Qs.stringify(data);
	}],
})
instance.interceptors.request.use(config => {
	// 在发送请求之前做些什么
	toast.show()
	return config;
}, error => {
	// 对请求错误做些什么
	return Promise.reject(error);
})
instance.interceptors.response.use(response => {
	// 返回数据后的处理
	toast.hide()
	let data = response.data
	if(data.error){
		Dialog.$create({
			type:'alert',
			content:data.message,
			icon:'cubeic-alert'
		}).show()
				return Promise.reject(response.data);
		}else{
			return response.data;
		}
}, error => {
	// 对请求错误做些什么
	toast.hide()
	Dialog.$create({
		type:'alert',
		content:'服务器错误',
		icon:'cubeic-alert'
	}).show()
	return Promise.reject(error);
});
// 暴露接口对象
export default instance

main.js引用:

import Vue from 'vue'
import './cube-ui'
import App from './App.vue'
import axios from 'axios'
Vue.prototype.$axios = axios
Vue.config.productionTip = false
import request from './request.js'
import 'amfe-flexible'
// 原型避免冲突
Vue.prototype.$request = request //更改vue的原型,添加新的属性	
import router from './router.js'

new Vue({
	router,
  render: h => h(App),
}).$mount('#app')

在vue中用this.$request来请求后台响应。就不用axios

	this.$request({
		url: '/classmanager/index',
		method: 'post',
		data: {
		token: sessionStorage.getItem('token'),
			}
		}).then(res => {
				
		}).catch(res => {
				
		})
没有账号? 忘记密码?

社交账号快速登录