vue3+vite 封装axios请求
安装axios
npm install axios
创建axios实例
// http/index.js
import axios from 'axios'
import {
ElLoading,
ElMessage
} from 'element-plus';
//创建axios的一个实例
var instance = axios.create({
baseURL: import.meta.env.VITE_APP_URL, //接口统一域名
timeout: 6000, //设置超时
headers: {
'Content-Type': 'application/json;charset=UTF-8;',
}
})
let loading;
//正在请求的数量
let requestCount = 0
//显示loading
const showLoading = () => {
if (requestCount === 0 && !loading) {
loading = ElLoading.service({
text: "Loading ",
background: 'rgba(0, 0, 0, 0.7)',
spinner: 'el-icon-loading',
})
}
requestCount++;
}
//隐藏loading
const hideLoading = () => {
requestCount--
if (requestCount == 0) {
loading.close()
}
}
//请求拦截器
instance.interceptors.request.use((config) => {
showLoading()
// 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
const token = window.localStorage.getItem('token');
token && (config.headers.Authorization = token)
//若请求方式为post，则将data参数转为JSON字符串
if (config.method === 'POST') {
config.data = JSON.stringify(config.data);
}
return config;
}, (error) =>
// 对请求错误做些什么
Promise.reject(error));
//响应拦截器
instance.interceptors.response.use((response) => {
hideLoading()
//响应成功
console.log('拦截器报错');
return response.data;
}, (error) => {
console.log(error)
//响应错误
if(error.response&&error.response.status){
const status = error.response.status
switch (status) {
case 400:
message = '请求错误';
break;
case 401:
message = '请求错误';
break;
case 404:
message = '请求地址出错';
break;
case 408:
message = '请求超时';
break;
case 500:
message = '服务器内部错误!';
break;
case 501:
message = '服务未实现!';
break;
case 502:
message = '网关错误!';
break;
case 503:
message = '服务不可用!';
break;
case 504:
message = '网关超时!';
break;
case 505:
message = 'HTTP版本不受支持';
break;
default:
message = '请求失败'
}
ElMessage.error(message);
return Promise.reject(error);
}
return Promise.reject(error);
});
export default instance;
封装请求方式
// http/axios.js
import instance from "./index"
/**
* @param {String} method 请求的方法：get、post、delete、put
* @param {String} url 请求的url:
* @param {Object} data 请求的参数
* @param {Object} config 请求的配置
* @returns {Promise} 返回一个promise对象，其实就相当于axios请求数据的返回值
*/
const axios = ({
method,
url,
data,
config
}) => {
method = method.toLowerCase();
if (method == 'post') {
return instance.post(url, data, {...config})
} else if (method == 'get') {
return instance.get(url, {
params: data,
...config
})
} else if (method == 'delete') {
return instance.delete(url, {
params: data,
...config
}, )
} else if (method == 'put') {
return instance.put(url, data,{...config})
} else {
console.error('未知的method' + method)
return false
}
}
封装请求接口
创建api文件
import axios from "../http/request"
//请求示例
//get
export const mokeGet = (data) => {
return axios({
url: "/api/xxxx",
method: "get",
data,
config: {
headers: {
'Request-Type': 'wechat'
},
timeout: 10000
}
})
}
//post
export const mokePost = (data) => {
return axios({
url: "/api/xxxx",
method: "post",
data,
config: {
headers: {
'Request-Type': 'wechat'
},
timeout: 10000
}
})
}
vue中调用
import { mokePost } from "@/api";
import {onMounted} from "vue"
export default {
setup() {
onMounted(() => {
mokePost().then(res=>{
console.log(res)
})
})
return {};
},
};
