vue中axios的使用

最新推荐文章于 2026-05-03 09:39:52 发布

原创最新推荐文章于 2026-05-03 09:39:52 发布 · 2.7k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

vue 专栏收录该内容

17 篇文章

订阅专栏

这篇博客讲述了在Vue项目中如何使用axios，包括axios的基础用法和在Vue项目中的封装。通过示例代码展示了如何配置请求地址、方法和参数，并强调了全局配置axios.defaults的影响。还讨论了在大型项目中，由于可能涉及多个服务器，所以需要在每个组件中单独创建axios实例以避免维护困难。最后，博主分享了在network文件夹中封装axios的request.js文件的写法和在组件中调用的方式。

写上一个项目的时候，我们就用到了axios，但是我当时没怎么学，不知道从哪下手，这个时候我小伙伴又把咋用的给我整理好了，那我就老老实实的当个废物，他怎么说我怎么用。最后能用，但是不理解为什么这样用，正好学vue中的axios时又重新学了一遍。

axios的使用

直接拿代码来讲吧

axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000
axios({
  url: '/home/multidata',
  methods: "get",
  params: {
    //写参数
  }
}).then(res => {
  console.log(res)
}).catch(err => {
 console.log(err)
 })

交互无非就是你想从服务器拿到什么，你想给服务器什么。直接在axios后面进行配置，请求的地址，请求的方法，请求的参数
axios.defaults全局配置，之后的每个请求都会收到影响，一般来写baseUrl，请求时间之类的参数。
参数请求配置完后在后面的.then里面进行请求成功后的操作。
请求失败后会跳过.then进入.catch里面，及返回的错误信息。

vue中的axios

在一个项目中，肯定不止一两次的进行请求，如果每个组件下面都单独写axios请求的话，后期的维护中需要挨个的去修改，是非常麻烦的。所以在文件目录中创建network文件夹，跟服务器有关的代码放在里面，自己对axios进行封装，以便后期的维护
在这里插入图片描述
上面提到的设置全局变量的baseUrl对于整个项目来说是有问题的，因为某些大型项目用的服务器不止一个，为了环境浏览器压力啥的，所以每次封装都要创建单独的axios。

network下文件夹中的request.js的写法

import axios from 'axios'

export function request(config, success, failure) {
// 1.创建axios的实例
  const instance = axios.create({
    baseURL: "http://123.207.32.32:8000",
    timeout: 5000
  })

//发送真正的网络请求
  instance(config)
    .then(res => {
      success(res)
    })
    .catch(err => {
      failure(err)
    })
}

使用的组件中写法：

// 封装函数
import {require} from './network/request'

require({
  url: '/home/multidata'
}, res => {
  console.log(res)
},err =>{
  console.log(err);
})