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>
相关推荐
码农幻想梦1 小时前
实验九 视图的使用
前端·数据库·oracle
开心工作室_kaic3 小时前
ssm010基于ssm的新能源汽车在线租赁管理系统(论文+源码)_kaic
java·前端·spring boot·后端·汽车
Python私教3 小时前
Flutter颜色和主题
开发语言·javascript·flutter
大力水手~4 小时前
css之loading旋转加载
前端·javascript·css
Nguhyb4 小时前
-XSS-
前端·xss
前端郭德纲4 小时前
深入浅出ES6 Promise
前端·javascript·es6
就爱敲代码4 小时前
ES6 运算符的扩展
前端·ecmascript·es6
天天进步20155 小时前
Lodash:现代 JavaScript 开发的瑞士军刀
开发语言·javascript·ecmascript
王哲晓5 小时前
第六章 Vue计算属性之computed
前端·javascript·vue.js
假装我不帅5 小时前
js实现类似与jquery的find方法
开发语言·javascript·jquery