Vue3集成axios实现ajax请求

工具安装

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

javascript 复制代码
yarn add axios@next

简单测试

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

javascript 复制代码
<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,代码:

javascript 复制代码
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;
javascript 复制代码
<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>
相关推荐
aaaweiaaaaaa几秒前
HTML和CSS学习
前端·css·学习·html
秋秋小事6 分钟前
React Hooks useContext
前端·javascript·react.js
Jinuss9 分钟前
Vue3源码reactivity响应式篇之reactive响应式对象的track与trigger
前端·vue3
striver_#10 分钟前
百度前端社招面经二
前端
xcnn_11 分钟前
前端入门——案例一:登录界面设计(html+css+js)
前端·css·html
ST.J11 分钟前
前端笔记2025
前端·javascript·css·vue.js·笔记
拉不动的猪12 分钟前
回顾vue中的Props与Attrs
前端·javascript·面试
Jerry1 小时前
使用 Material 3 在 Compose 中设置主题
前端
耶啵奶膘1 小时前
uni-app头像叠加显示
开发语言·javascript·uni-app
chéng ௹1 小时前
uniapp 封装uni.showToast提示
前端·javascript·uni-app