Vue3 axios 封装

文章目录

• • • • vue 版本
      • 安装依赖
      • 封装
      • 挂载到vue上去
      • 简单使用
      • 开发环境下的跨域问题

vue 版本

vue3

安装依赖

安装 axios

npm i axiso --save-dev

封装

这里将封装到http.js
引入axios
创建axios(设置url地址，访问前缀,超时时间)
然后设置拦截器(成功响应拦截，失败拦截器)
成功拦截器可以做是否登录的统一处理(前提是未登录返回的也是200系列状态码，不是的话走到失败拦截器中)

# 引入axios
import axios from "axios"
# 导出创建函数
export default function createHttp() {
    # 创建axios(设置url地址，访问前缀,超时时间)
    const http = axios.create({
        url: 'http:localhost:8080',
        baseURL: 'api',
        timeout: 6000,
    })
    # 然后设置拦截器(成功响应拦截，失败拦截器)
    # response 是axios封装过的
    # 可以自己打印看看是什么东西
    http.interceptors.response.use(
        (response) => {
        # 成功拦截器
        return response.data;
    }, (response) => {
        # 失败拦截器
        console.log(response)
    })
    return http;
}

挂载到vue上去

因为以前用vue2都是通过this.$axios调用axios
这里和以前保持一致吧
vue3 需要通过 config.globalProperties 挂载

# main.js
import {createApp} from 'vue'
import App from './App.vue'
import {createWebHistory} from 'vue-router'
import createRouter from "./router"
# 引入封装好的创建axios方法
import createHttp from "@/http";

const router = createRouter(createWebHistory())
const vueApp = createApp(App)
# 通过 config.globalProperties 挂载
vueApp.config.globalProperties.$axios =  createHttp()
vueApp.use(router).mount('#app')

简单使用

<template>
    <common-header></common-header>
    <router-view></router-view>
</template>

<script>
    import CommonHeader from "../components/CommonHeader";

    export default {
        name: "HomePage",
        components: {CommonHeader},
        mounted() {
            # 填写完整的url 会覆盖 axios中设置的url，baseUrl
            this.$axios.get('https://www.baidu.com').then((response)=>{
                console.log(response)
            })
        }
    }
</script>

开发环境下的跨域问题

上面的访问https://www.baidu.com的示例
拿不到数据，这是因为跨域了
开发环境下解决跨域设置node代理即可
设置vue.config.js 中配置代理相关信息

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: true,
    # 开始配置代理
    devServer: {
        # 代理的域名
        host: 'localhost',
        # 代理端口
        port: 8080,
        proxy: {
            # 配置代理的string
            '/api': {
                # 代理目标
                target: 'https://www.baidu.com',
                # 路径重写 将api替换成/
                # localhost:8080/api => https://www.baidu.com
                pathRewrite: {
                    '/api': '/'
                },
            },
        }
    },
})

测试

# HomePage
<template>
    <common-header></common-header>
    <router-view></router-view>
</template>

<script>
    import CommonHeader from "../components/CommonHeader";

    export default {
        name: "HomePage",
        components: {CommonHeader},
        data() {
            return {
                content: 22,
            }
        },
        mounted() {
            # 由于配置过axios的url，baseUrl
            # 这个访问的是 localhost:8080/api/
            # 由于配置过代理
            # 实际输出的是百度的内容(http://www.baidu.com)
            this.$axios.get('/').then((response) => {
               console.log(response)
            })
        }
    }
</script>