vue3封装axios全局

1、安装

npm install axios

2、新建http.js

import axios from 'axios';

//声明一个基础接口变量
let base_url;
//配置开发环境
if (process.env.NODE_ENV === 'development') {
    base_url = 'http://www.es.mycat.com/';
}
// 配置生产环境
if (process.env.NODE_ENV === 'production') {
  base_url = 'http://www.es.mycat.com/';
}
axios.defaults.baseURL = base_url;

// 请求数据转换成form-data格式
axios.defaults.transformRequest = [function (data) {
	let src = ''
	for (let item in data) {
	  src += encodeURIComponent(item) + '=' + encodeURIComponent(data[item]) + '&'
	}
	return src
}]

// 发送请求前拦载
axios.interceptors.request.use((config)=>{
	var urlsa = config.url;
	var t = Date.parse(new Date()) / 1000;//时间戳
	var login = window.localStorage.getItem('login');
	var token = window.localStorage.getItem('token');
	if(urlsa.indexOf("?") != -1 ){
		config.url = config.url + "&datest="+t+"&login_name="+login+"&token="+token
	}else{
		config.url = config.url + "?datest="+t+"&login_name="+login+"&token="+token
	}
   return config
},(error)=>{
    return Promise.reject(error)
})

//发送请求返回拦载
axios.interceptors.response.use(function (response) {
	// 对响应数据做点什么
	var data = response.data;
	if(data.code == 206){
		alert('没有操作权限');
		window.localStorage.clear('login');//删除
		window.localStorage.clear('token');//删除
		window.location.href = "/#/index";
		return false;
	}
	return response;
	},
	function (error) {
		// 对响应错误做点什么
		return false;
	}
);


/**
* 封装的请求基类方法
* @param url 地址
* @param method 请求类型
* @param headers 头部信息
* @param data 数据(post用)
* @param params 数据(get用)
* @param success 成功返回
* @param error 失败返回
* @constructor
*/
axios.Request=function ({url,method="GET",data={},params={},success,error}) {
	let headers = '';
	if(method == "GET" || method == "get"){
		  headers = 'Content-Type: application/json';
	}else{
		  headers = 'Content-Type: application/x-www-form-urlencoded';
	}
	axios({
		url:url,
		headers:headers,
		method:method,
		data:data,
		params:params,
	}).then(res=>{
		typeof success==="function"&&success(res.data);
	}).catch(e=>{
		typeof error==="function"&&error(e);
	})
}

 /**
* get封装请求
* @param url 地址
* @param data 数据
* @param success 成功返回
* @param error 失败返回
*/
axios.getRequest=function ({url,data},success,error) {
	axios.Request({url,method:"GET",params:data,success,error})
}

/**
* post请求
* @param url 地址
* @param data 数据
* @param success 成功返回
* @param error 失败返回
*/
axios.postRequest=function ({url,data},success,error) {
	axios.Request({url,method:"POST",data:data,success,error})
}


export default axios;

2、main.js引入

import { createApp } from 'vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

import axios from './assets/http.js';
const app = createApp(App)
app.use(ElementPlus)

app.config.globalProperties.$http = axios;

app.mount('#app')

3、使用

this.$http.post('/Login/login',this.form).then((res) => {
	console.log(res.data)
)


this.$http.get('/Login/login').then((res) => {
    console.log(res.data)
})

你可能感兴趣的:(javascript,vue.js,前端)