脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → axios在Vue3使用

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使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 详解vue生命周期

    详解vue生命周期

    这篇文章主要为大家介绍了vue的生命周期，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2021-11-11
  • vue components 动态组件详解

    vue components 动态组件详解

    这篇文章主要介绍了vue components 动态组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-11-11
  • vue数据控制视图源码解析

    vue数据控制视图源码解析

    本篇内容给大家详细分析了关于vue数据控制视图的源码以及重点做了注释，有兴趣的朋友参考学习下。
    2018-03-03
  • vue 全局引用公共的组件以及公共的JS文件问题

    vue 全局引用公共的组件以及公共的JS文件问题

    这篇文章主要介绍了vue 全局引用公共的组件以及公共的JS文件问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • 解决vue-cli-service不是内部或外部命令也不是可运行的程序或批处理文件的报错问题

    解决vue-cli-service不是内部或外部命令也不是可运行的程序或批处理文件的报错问题

    这篇文章主要介绍了解决vue-cli-service不是内部或外部命令也不是可运行的程序或批处理文件的报错问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-03-03
  • 详解vue slot插槽的使用方法

    详解vue slot插槽的使用方法

    本篇文章主要介绍了详解vue slot插槽的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • vue项目实现图片懒加载的简单步骤

    vue项目实现图片懒加载的简单步骤

    懒加载的好处在于减少服务器的压力,在网络比较慢的情况下,可以提前给这张图片添加一个占位图片,提高用户的体验,这篇文章主要给大家介绍了关于vue项目实现图片懒加载的相关资料,需要的朋友可以参考下
    2022-09-09
  • vue3+vite相对路径的处理方式

    vue3+vite相对路径的处理方式

    这篇文章主要介绍了vue3+vite相对路径的处理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • 对vue v-if v-else-if v-else 的简单使用详解

    对vue v-if v-else-if v-else 的简单使用详解

    今天小编就为大家分享一篇对vue v-if v-else-if v-else 的简单使用详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 在vue中使用echarts实现上浮与下钻效果

    在vue中使用echarts实现上浮与下钻效果

    这篇文章主要介绍了在vue中使用echarts实现上浮与下钻效果,本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-11-11

最新评论