封装axios请求

最新推荐文章于 2024-05-20 14:04:24 发布

望星子蒙尘

最新推荐文章于 2024-05-20 14:04:24 发布

阅读量739

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/wslby2020/article/details/121622317

本文档详细介绍了如何在Vue项目中封装axios，以实现HTTP请求的统一管理。首先通过npm安装axios，然后创建request.js进行基础配置，如设置baseURL和超时时间。接着，在home.js中导入并扩展request.js，定义特定页面的请求。最后在test.vue组件中，调用home.js中的方法获取数据，并在created钩子中处理响应。这样实现了axios在Vue项目的模块化和复用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般的Vue项目中需要封装axios请求。

首先在主项目中使用命令行$ npm install axios下载axios

创建request.js

// 引入axios
import axios from 'axios'

export function axiosrequest(config){
  // 进行基础配置
  const instance = axios.create({
    baseURL:'http://localhost:3000/',
    timeout:10000
  })
  return instance(config) 
}

在这里封装axios的基础配置

创建home.js

import {get} from './request'

export function homeMultidata(){
  return axiosrequest({
    url:'posts/1',
  })
}

进行更加详细的页面配置，可以创建多个类似home.js的细分配置文件，它们共同拥有request.js的基础配置

创建test.vue

<template>
</template>

<script>
    //获取 home.js 中的 homeMultidata
    import {homeMultidata} from './home'

    created(){
      homeMultidata().then(res => {
        // 获取到的res来自  http://localhost:3000/posts/1
        this.banner = res.posts
        this.recommend = res.posts
      })
    }
</script>

<style>
</style>