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>
相关推荐
大厂码农老A27 分钟前
P10老板一句‘搞不定就P0’,15分钟我用Arthas捞回1000万资损
java·前端·后端
拜无忧35 分钟前
【教程】Vue 3 项目架构终极指南:一份面向新手的、高性能的实战教程
前端·vue.js
星海穿梭者1 小时前
SQL SERVER 查看锁表
java·服务器·前端
一枚前端小能手1 小时前
「周更第5期」实用JS库推荐:RxJS
前端·javascript·rxjs
影i1 小时前
关于浏览器 Cookie 共享机制的学习与梳理
前端
文心快码BaiduComate1 小时前
文心快码已接入GLM-4.6模型
前端·后端·设计模式
RoyLin1 小时前
C++ 原生扩展、node-gyp 与 CMake.js
前端·后端·node.js
我是天龙_绍1 小时前
二进制散列值 搞 权限组合,记口诀:| 有1则1 ,&同1则1
前端
江城开朗的豌豆1 小时前
拆解微信小程序的“积木盒子”:这些原生组件你都玩明白了吗?
前端·javascript·微信小程序
爱吃甜品的糯米团子1 小时前
CSS Grid 网格布局完整指南:从容器到项目,实战详解
前端·css