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>