Vue3集成axios实现ajax请求

工具安装

安装axios工具插件，务必保证是在客户端项目根目录下安装。

yarn add axios@next

简单测试 

src/views/Home.vue，先测试服务端的跨域资源共享是否能使用，代码：

<template><div class="home"><Header></Header><Footer></Footer></div>
</template><script setup>
import Header from "../components/Header.vue"
import Footer from "../components/Footer.vue"// 测试CORS的跨域配置是否有问题
import axios from "axios"
const http = axios.create()
// 测试服务端的跨域是否配置成功
http.get("http://local.api.leshen.cn:8000/home/test").then(response=>{console.log(response.data);
})</script><style scoped></style>

建立工具类

1. 配置axios请求拦截器和响应拦截器。

src/utils/http.js，代码：

import axios from "axios"const http = axios.create({// timeout: 2500,                          // 请求超时，有大文件上传需要关闭这个配置baseURL: "http://local.leshen.cn:8000",     // 设置api服务端的默认地址[如果基于服务端实现的跨域，这里可以填写api服务端的地址，如果基于nodejs客户端测试服务器实现的跨域，则这里不能填写api服务端地址]withCredentials: false,                    // 是否允许客户端ajax请求时携带cookie
})// 请求拦截器
http.interceptors.request.use((config)=>{console.log("http请求之前");return config;
}, (error)=>{console.log("http请求错误");return Promise.reject(error);
});// 响应拦截器
http.interceptors.response.use((response)=>{console.log("服务端响应数据成功以后，返回结果给客户端的第一时间，执行then之前");return response;
}, (error)=>{console.log("服务端响应错误内容的时候。...");return Promise.reject(error);
});export default http;

<template><div class="home"><Header></Header><Footer></Footer></div>
</template><script setup>
import Header from "../components/Header.vue"
import Footer from "../components/Footer.vue"
// 测试CORS的跨域配置是否有问题
import http from "../utils/http.js"// // 测试CORS的跨域配置是否有问题
// import axios from "axios"
// const http = axios.create()
// // 测试服务端的跨域是否配置成功
// http.get("http://local.api.leshen.cn:8000/home/test").then(response=>{
//   console.log(response.data);
// })// 测试服务端的跨域是否配置成功
http.get("/home/test").then(response=>{console.log(response.data);
})</script><style scoped></style>