axios在Vue3中的使用实例代码

 更新时间:2023年07月04日 14:34:06   作者:velpro_!  
Axios是一个基于Promise的HTTP客户端,用于浏览器和Node.js,这篇文章主要介绍了axios在Vue3中的使用,需要的朋友可以参考下

Axios是一个基于Promise的HTTP客户端,用于浏览器和Node.js。它可以在浏览器中发送异步请求,也可以在Node.js中发送HTTP请求。Axios可以处理HTTP请求和响应,支持拦截器、取消请求、自动转换JSON数据等功能。在Vue3中,Axios是一个常用的HTTP请求库。

1. 安装:npm install axios

2. 配置基础实例

// utils/http.js
import axios from "axios";
// 创建实例
 const httpInstance = axios.create({
     baseURL:'https://pcapi-xiaotuxian-front-devtest.itheima.net',
     timeout:5000
 })
// 如果项目里需要得到接口基地址不同,可以这样做
// axios.create()方法可以执行多次,每次执行就会生成一个新的实例
// const httpInstance2 = axios.create({
//     baseURL:'url2',  // 基地址
//     timeout:5000    // 超时器
// })
//拦截器
httpInstance.interceptors.request.use(config=>{
    return config
},e=>Promise.reject(e))
//响应器
httpInstance.interceptors.response.use(res=> res.data,e=>{
    return Promise.reject(e)
})
// 导出
export default httpInstance

3. 

// apis/testApi.js
import httpInstance from "@/utils/http";
export function getCatefory(){
    return httpInstance({
        url:'home/category/head'
    })
}

4. 使用

import {getCatefory} from '@/apis/testApi'
getCatefory().then(res=>{
    console.log(res)
})

到此这篇关于axios在Vue3中的使用的文章就介绍到这了,更多相关axios在Vue3使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue3结合TypeScript项目开发实践总结

    Vue3结合TypeScript项目开发实践总结

    本文主要介绍了Vue3结合TypeScript项目开发实践总结,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue组件Prop传递数据的实现示例

    vue组件Prop传递数据的实现示例

    本篇文章主要介绍了vue组件Prop传递数据的实现示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Uniapp打包Android文件选择上传问题图文详解

    Uniapp打包Android文件选择上传问题图文详解

    在移动应用开发中,文件上传是一项常见的功能,尤其在社交、云存储以及各种服务类应用中,这篇文章主要介绍了Uniapp打包Android文件选择上传问题的相关资料,需要的朋友可以参考下
    2025-06-06
  • vue项目中使用rem,在入口文件添加内容操作

    vue项目中使用rem,在入口文件添加内容操作

    这篇文章主要介绍了vue项目中使用rem,在入口文件添加内容操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue传递参数不在URL路径拼接显示问题

    Vue传递参数不在URL路径拼接显示问题

    这篇文章主要介绍了Vue传递参数不在URL路径拼接显示问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • VUE引入使用G2图表的实现

    VUE引入使用G2图表的实现

    本文主要介绍了VUE引入使用G2图表的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • Element el-row el-col 布局组件详解

    Element el-row el-col 布局组件详解

    这篇文章主要介绍了Element el-row el-col 布局组件使用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • Vue3+@antv/g2plot 生成词云图的效果

    Vue3+@antv/g2plot 生成词云图的效果

    词云图是一种文本可视化技术,用于展示文本数据中关键词的频次或重要性,文章介绍了如何在Vue3中使用@antv/g2plot生成词云图,并解释了如何共享颜色和随机生成颜色的组件,感兴趣的朋友一起看看吧
    2024-12-12
  • vue slots 组件的组合/分发实例

    vue slots 组件的组合/分发实例

    今天小编就为大家分享一篇vue slots 组件的组合/分发实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 使用ElementUI el-upload实现一次性上传多个文件

    使用ElementUI el-upload实现一次性上传多个文件

    在日常的前端开发中,文件上传是一个非常常见的需求,尤其是在用户需要一次性上传多个文件的场景下,ElementUI作为一款非常优秀的Vue.js 2.0组件库,为我们提供了丰富的UI组件,本文介绍了如何使用ElementUI el-upload实现一次性上传多个文件,需要的朋友可以参考下
    2024-08-08

最新评论