vue3中封装axios请求

首先在vue项目中引入axios包，在控制台输入以下命令

npm install axios --save

在src文件夹下创建axios文件夹，然后我们就要开始封装axios了
在创建好的axios文件夹下创建http.js文件，主要封装就在本文件，也可以在本文件中设置请求头或者拦截器，代码如下：

//引入axios
import axios from 'axios';
//引入elementplus消息提示组件
import { ElMessage } from 'element-plus'
import router from '../router/index.js'
axios.defaults.baseURL ="";

// axios.defaults.timeout = 5000;

// axios.interceptors.request.use(
//     config => {
//         config.headers['UserId'] = 23;  //将UserId设置成请求头
//       return config;
//     },
//     err => {
//       return Promise.reject(err);
//     }
//   );
  
//http request 拦截器
// axios.interceptors.request.use(
//   config => {
//     // const token = getCookie('名称');注意使用的时候需要引入cookie方法，推荐js-cookie
//     config.data = JSON.stringify(config.data);
//     if(config.url.substring(config.url.length-5)!='login'){
//         if(sessionStorage.getItem('token') == ''){

//         }else{
//             // config.params = {'token':sessionStorage.getItem('token')}
//             config.headers['TOKEN'] = sessionStorage.getItem('token')
//         }
//     }
    
//     return config;
//   },
//   error => {
//     return Promise.reject(err);
//   }
// );
// //http response 拦截器
// axios.interceptors.response.use(
//   response => {
//     if(response.data.token_status != 1){
//         router.push({
//             path:"/login",
//             query:{redirect:router.currentRoute.fullPath}//从哪个页面跳转
//         })
//         if(response.data.message == "登录信息已失效"){
//             ElMessage({
//                 showClose: true,
//                 message: '您好！登录信息已过期！请重新进行登录！',
//                 type: 'warning',
//             })
//         }
//     }
//   //   if(response.data.errCode ==2){
//   //     router.push({
//   //       path:"/login",
//   //       query:{redirect:router.currentRoute.fullPath}//从哪个页面跳转
//   //     })
//   //   }
//     return response;
//   },
//   error => {
//     return Promise.reject(error)
//   }
// )
// const api = axios.create({
//     baseURL:''
// })
//开始封装请求
const http = {
    get: function(url,params) {
        return new Promise((resolve, reject) => {
            axios.get(url,{params:params}).then(res => {
                resolve(res.data);
            }).catch(err => {
                reject(err);
            })
        })
    },
    post: function(url, params) {
        return new Promise((resolve, reject) => {
            axios.post(url, params)
                .then(res => {
                    resolve(res.data);
                })
                .catch(err => {
                    reject(err.data)
                })
        });
    },
    put:function(url, params) {
        return new Promise((resolve, reject) => {
            axios.put(url, params)
                .then(res => {
                    resolve(res.data);
                })
                .catch(err => {
                    reject(err.data)
                })
        });
    },
    delete:function(url, params){
        return new Promise((resolve, reject) => {
            axios.delete(url, {data:params}).then(res => {
                resolve(res.data);
            }).catch(err => {
                reject(err);
            })
        })
    }
}
//导出
export default http;

创建好http.js文件后，在axios文件夹下再创建sell.js文件，代码如下：

//导入http.js
import axios from "./http"
//服务器url
const server = "http://192.168.0.102:8080"
//用于webscoket
const ws = "192.168.0.102:8080"
//封装请求
const goods = {
//get请求示例
getHttp() {
    return axios.get(server + `/users/user`);
},
//post请求示例
postHttp(data) {
    return axios.post(server + `/users/login`, data);
},
//put请求示例，路径拼接id，带修改data，data位于请求body里
DataUpdate(id, data) {
    return axios.put(server + `/data_source/${id}` data);
},
//delete请求示例，路径拼接id
DataDelete(id) {
    return axios.delete(server + `/data_source/${id}`);
},
//也可以单纯是url拼接接口
url() {
    return server + `/model_item/upload_model_file`
},
//webscoket请求
WsScript() {
    return `ws://${ws}/ws/exec_code`
}
}
//导出
export default goods;

创建好sell.js文件后，在axios文件夹下再创建最后一个文件api.js，代码如下：

//导入sell文件
import sell from "./sell"
const http={
    sells:sell
}
//导出
export default http;

完成以上步骤后就可以在项目中使用了，以下是使用示例：

<script lang="ts" setup>
//导入我们封装的axios
import http from "../../axios/api";

//创建请求方法,以下是无参数get请求，如果是其他带参数的请求在括号中加入对应参数就可以了
const getHttp = () => {
    http.sells.getHttp()
    	.then((data) => {
       	 	console.log(data)
    	})
        .catch((e) => {
            console.log(e)
        });
}
</script>

封装后可以统一管理请求，避免因url的改变引起麻烦。

vue3中封装axios请求

悦读