Vue3 axios数据请求封装

键指江湖

已于 2023-07-26 13:59:17 修改

阅读量1k

点赞数

分类专栏： Vue3 文章标签： vue3 axios 前端

于 2023-07-26 12:03:27 首次发布

本文链接：https://blog.csdn.net/ahui829/article/details/131936150

版权

Vue3 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue3+ts+vite环境下，对axios进行配置，包括设置基础URL、超时时间、携带cookie等，并添加了请求和响应拦截器来处理token及错误。然后展示了如何创建api接口文件以复用请求方法，最后演示了在组件中如何调用这些封装好的接口获取数据。

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

Vue3 axios数据请求封装

环境：vue3+ts+vite
首先在项目目录下安装axios
运行 npm install axios
成功后在package.json文件会显示。

目录：
在这里插入图片描述

request.ts文件代码：

import axios from 'axios'

const request= axios.create({
    baseURL:'https://api.xxxxx.com',//请求地址
    timeout: 60000, // 请求超时时间
    withCredentials: true,// 异步请求携带cookie
    headers: {
    //设置后端需要的传参类型
    'Content-Type': 'application/json',
    },
})
// 添加请求拦截器
request.interceptors.request.use(config=>{
    // 如果你要去localStor获取token,(如果你有)
    // let token = localStorage.getItem("x-auth-token");
    // if (token) {
    //添加请求头
    //config.headers["Authorization"]="Bearer "+ token
    // }
    return config
},err=>{
    return Promise.reject(err)
});
// 添加响应拦截器
request.interceptors.response.use(response=>{
    return response.data
},err=>{
    return Promise.reject(err)
});
export default request

api.ts文件代码：

import instance from "./request";
const api_name = "/api/v1";

export default {
    getData(url: string, params: object) {
        return instance({
            url: api_name+url,
            method: 'get',
            params
        })
    },
    postData(url: string, params: object){
        return instance({
            url:  api_name+url,
            method: 'post',
            data: params,
        })
    }
}

使用：

<template>
    <div class="news">
        <ul>
            <li v-for="item in state.list">
                {{item.title}}
            </li>
        </ul>
    </div>
</template>
<script setup lang="ts">
import {reactive} from "vue";
import getApi from "@/utils/api";
import {useRoute} from "vue-router";
const route=useRoute()
const state=reactive({
    list:<any>[]
})
getApi.getData("/content/news/",route.query).then((res)=>{
    state.list=res.data.list
    console.log(res)
})
</script>