vue3+vite 封装axios请求

• 安装axios
• 创建axios实例
• 封装请求方式
• 封装请求接口
• vue中调用

安装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.statusswitch (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/request.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}
}
export default axios

封装请求接口

创建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 {};},
};

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！