VUE—axios的get/post方法（图文详情）

最新推荐文章于 2025-05-28 11:41:52 发布

Poppy_LYT

最新推荐文章于 2025-05-28 11:41:52 发布

阅读量334

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE 文章标签： VUE

本文链接：https://blog.youkuaiyun.com/Poppy_LYT/article/details/98092816

VUE 专栏收录该内容

68 篇文章

订阅专栏

本文详细介绍了如何在VUE项目中利用axios库实现GET和POST请求的方法。首先展示了如何在methods中定义请求函数，包括get和post方法的使用，以及如何在created生命周期钩子中调用这些函数。同时，通过console.log展示了请求成功和失败时的回调函数处理。

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

VUE—axios的get/post方法

下载引入axios

第一步：在methods写方法

methods: {
    getUrl () { //get方法
      axios.get('https://www.easy-mock.com/mock/5d41580a1a802c0d5e53dcc2/example/aa')
        .then((res) => {
          console.log(res.data)
        })
         // then是获取成功的回调函数
        .catch((err) => {
          console.log(err)
      })
      // catch是获取失败的回调函数，若地址错误console.log会出现404
    },
    postUrl () {  //post方法
      axios.post('https://www.easy-mock.com/mock/5d41580a1a802c0d5e53dcc2/example/bb')
        .then((res) => {
          console.log(res.data)
        })
        .catch((err) => {
          console.log(err)
        }) 
    },
    axiosFn () {  //不推荐
      axios({
        method: 'get',
        url: 'https://www.easy-mock.com/mock/5d41580a1a802c0d5e53dcc2/example/aa'
      })
        .then((res) => {
          console.log(res.data)
        })
        .catch((err) => {
          console.log(err)
        })
    }
  },

第二步：在created调用方法

 created () {
    this.getUrl()
    this.postUrl()
    this.axiosFn()
  }

console.log结果如下
在这里插入图片描述