vue-axios的安装及四个常见方法

最新推荐文章于 2024-08-07 09:48:40 发布

有钱夫人

最新推荐文章于 2024-08-07 09:48:40 发布

阅读量2.8k

点赞数

文章标签： vue.js npm 前端

本文链接：https://blog.csdn.net/Rich_lady/article/details/125082024

版权

本文介绍了如何使用npm安装axios，并在Vue项目中全局引入。通过示例展示了axios的GET和POST方法的使用，包括无参数GET请求、带参数POST请求以及通过对象传递参数的方式。在main.js中，将axios挂载到Vue原型上，方便组件中直接调用。

摘要由CSDN通过智能技术生成

安装

axios可以通过npm安装引入

npm install axios --save

引用

我习惯在main.js里面引用

//在main.js里面引用
import axios from 'axios'
Vue.prototype.axios = axios;
 
new Vue({
    axios,
    router,
    store,
    render:h=>h(App)
}).$mount('#app')

方法

get方法

<script>
    export default{
        data(){
            return{
                
            }
        },
        methods:{
            //没有参数的情况
            getData(){
                this.axios.get('demourl').then(res=>{
                    console.log(res)
                }).catch(error=>{
                    console.log(error)
                })
            },
         
        }
    }
</script>

post方法

<script>
    export default{
        data(){
            return{
                params:{
                    id:1,
                    size:10
                }
            }
        },
        methods:{
            //情况1，调用本地对象
            postDataByBody(){
                 this.axios.post('/system/menu',this.params).then(function (response) {
                    console.log(response);
                  }).catch(function (error) {
                    console.log(error);
                  });
            }
            //情况2，通过封装出一个对象
            postDataBySetBody(){
                 let params= {
                    id:1,
                    size:12
                 }
                 this.axios.post('/system/menu',params).then(function (response) {
                    console.log(response);
                  }).catch(function (error) {
                    console.log(error);
                  });
            }
        }
    }
</script>