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>
