vue Axios 使用及注意点

最新推荐文章于 2025-03-11 19:02:48 发布

咕-咕

最新推荐文章于 2025-03-11 19:02:48 发布

阅读量886

点赞数

本文链接：https://blog.youkuaiyun.com/s921155148/article/details/81077938

版权

本文介绍了如何使用Axios库进行GET和POST请求，并详细解释了如何处理不同格式的数据发送，包括转换为form-data格式的方法。

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

1、使用npm安装

npm install axios

使用 cdn：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2、引用

import Axios from 'axios' //引用

Vue.prototype.$axios=Axios; //将Axios挂到Vue原型上

3、GET请求


    this.$axios.get("http://www.wwtliu.com/sxtstu/blueberrypai/getIndexBanner.php",{
      params:{
        type:'参数'
      }
    })
    .then(res=>{
      consoe.log(res)
    })
    .catch(error=>{
      console.log(error)
    })

4、post请求

 this.$axios.post("http://www.wwtliu.com/sxtstu/blueberrypai/getIndexBanner.php",{
    typs:'参数'
        }  
    )
    .then(res=>{
      console.log(res)
    })
    .catch(error=>{
      console.log(error)
    })

post请求注意：如果后台接收的数据格式是 form-data格式 : ?name=a&age=20 你需要进行转换

默认是 x-www-form-urlencoded格式: {name:'a',age:'20'} 这种格式的

怎样转换：node给我们提供了一个库 qs 我们先将qs引进来

import Qs from 'qs'

然后：Qs.stringify({转换参数})

 this.$axios.post("http://www.wwtliu.com/sxtstu/blueberrypai/getIndexBanner.php",Qs.stringify(
      {
        typs:'参数'
      }
    ))
    .then(res=>{
      this.msg=res.data.banner
    })
    .catch(error=>{
      console.log(error)
    });