vue3封装axios请求引入示例及使用教程

2024-07-24 阅读：240 类型：后端分类：Vue 标签： API

一、安装axios

npm install axios

二、新建api目录

三、在api目录下新建request.js文件，用于封装请求接口，编写如下代码

import axios from "axios";
import { ElMessage } from "element-Plus";
const service = axios.create();
// 添加请求拦截器
service.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });
// 添加响应拦截器
service.interceptors.response.use((res)=>{
      // console.log(res)
        const {code, data ,msg} = res.data
        if(code===200){
            return data;
        }else{
            const NETWORK_ERROR = '网络错误...'
            ElMessage.error(msg || NETWORK_ERROR);
            return Promise.reject(msg || NETWORK_ERROR)
        }
    }
   
 );
 function request(options){
    options.method = options.method || "get";
    return service(options);
 }
 export default request;

四、在api目录下新建api.js，用于整个项目api统一管理，编写如下代码：

// 整个项目api统一管理
import request from "./request";
// 请求首页表格数据
export default{
    getTableData(){
        return request({
            url: 'https://www.exame.com/list',
            method: "get",
        })
    }
}

五、全局引入

打开main.js文件，全局引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import api from "./api/api";
const app = createApp(App)

app.config.globalProperties.$api = api
app.use(router)
app.mount('#app')
// createApp(App).mount('#app')

六、在对应的页面使用

<script setup>
	import { ref, getCurrentInstance, onMounted } from 'vue';
	const { proxy } = getCurrentInstance(); 
	const getTableData = async ()=>{
    const data = await proxy.$api.getTableData();
        console.log(data)
    }
    onMounted(()=>{
        getTableData()
    })
</script>