【vue学习笔记】vue3安装并封装axios插件

最新推荐文章于 2024-08-26 11:18:15 发布

猿职场

最新推荐文章于 2024-08-26 11:18:15 发布

阅读量492

点赞数

分类专栏： vue 文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/qq_35392791/article/details/130082020

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue3项目中使用Vite进行配置，包括安装axios，设置API代理，封装请求服务，以及创建自定义API方法。同时，展示了如何在组件中调用这些API方法进行数据获取。

摘要由CSDN通过智能技术生成

vue3安装并封装axios插件

vue3部署：【vue学习笔记】 vue3 + vite + route实现框架构建
vue3引入element-ui，实现插件按需引入：【vue学习笔记】vue3引入unplugin-auto-import并接入element-ui
vue3安装reset.css：【vue学习笔记】vue3加入reset.csss

一、安装插件 axios

1. 安装

npm install axios -S

2.设置api代理

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue';
import { resolve } from "path"
//引入插件
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
vue(),
//配置插件
AutoImport({
resolvers: [ElementPlusResolver()],
imports: ['vue', 'vue-router']
	}),
	Components({
	resolvers: [ElementPlusResolver()],
	}),
	],
resolve: {
// 配置路径别名
alias: {
'@': resolve(__dirname, './src'),
},
},
// 设置api代理
server:{
proxy:{
'/api':'http://***' // 替换成你的域名
}
}
});

3.封装请求

在src下新建utils目录，新增request.js文件，添加下面的代码

import axios from 'axios';
//1. 创建axios对象
const service = axios.create();

//2. 请求拦截器
service.interceptors.request.use(config => {
	return config;
}, error => {
Promise.reject(error);
});

//3. 响应拦截器
service.interceptors.response.use(response => {
//判断code码
return response.data;
},error => {
return Promise.reject(error);
});
export default service;

4. 构建自己的api方法

在utils目录下新建api文件夹，并建一个banner.js

import request from '@/utils/request'
export function getBanner(){
return request({
	url:'/api/getBanner', // 这里填写你自己的api地址
	method:'get', // get方法可以省略不写
})
}

5. 使用banner.js

在你使用的界面中引入banner.js的方法

<script setup>
	import { getBanner } from '@/utils/api/banner'
	// 使用api
	// 定义一个变量接收
	let bannerList = ref([])
	onBeforeMount(()=>{
		getBanner().then(res=>{
			bannerList.value = res.data //  这里是接口返回值
			console.log(res)
		})
	})
</script>