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

安装

axios可以通过npm安装或者cdn引入

npm：

npm install axios --save

cdn:

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

引用

在需要使用的页面或者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{
        name:'demo',
        data(){
            return{
                id:1
            }
        },
        methods:{
            //没有参数的情况
            getData(){
                this.axios.get('demourl').then(res=>{
                    console.log(res)
                }).catch(error=>{
                    console.log(error)
                })
            },
            //直接在url拼接参数的情况
            getDataByQuery(){
                this.axios.get('demourl?id='+this.id).then(res=>{
                    console.log(res)
                }).catch(error=>{
                    console.log(error)
                });
            },
            //使用params来传参的情况
            getDataByParams(){
                this.axios.get('demourl',{
                    params:{
                        id:1
                    }
                }).then(res=>{
                    console.log(res)
                }).catch(error=>{
                    console.log(error)
                });
            }
        }
    }
</script>

post方法

<script>
    export default{
        name:'demo',
        data(){
            return{
                form:{
                    id:1,
                    name:'demo'
                }
            }
        },
        methods:{

            //情况1，直接在里面赋值
            postData(){
                 this.axios.post('/user', {
                     id: this.form.id,        // 参数 id
                     name: this.form.name   // 参数 name
                  }).then(function (response) {
                    console.log(response);
                  }).catch(function (error) {
                    console.log(error);
                  });
            }
            //情况2，调用本地对象
            postDataByBody(){
                 this.axios.post('/user',this.form).then(function (response) {
                    console.log(response);
                  }).catch(function (error) {
                    console.log(error);
                  });
            }
            //情况3，通过封装出一个对象
            postDataBySetBody(){
                 let form = {
                    id:1,
                    name:'demo'
                 }
                 this.axios.post('/user',form).then(function (response) {
                    console.log(response);
                  }).catch(function (error) {
                    console.log(error);
                  });
            }
        }
    }
</script>

put方法

<script>
    export default{
        name:'demo',
        data(){
            return{
                form:{
                    id:1,
                    name:'demo'
                }
            }
        },
        methods:{

            //直接在里面赋值
            putData(){
                 this.axios.post('/user', {
                     id: this.form.id,        // 参数 id
                     name: this.form.name   // 参数 name
                  }).then(function (response) {
                    console.log(response);
                  }).catch(function (error) {
                    console.log(error);
                  });
            }
        }
    }
</script>

delete方法

<script>
    export default{
        name:'demo',
        data(){
            return{
                form:{
                    id:1,
                    name:'demo'
                }
            }
        },
        methods:{
            deleteData(){
                 this.axios.delete('/user?id=1'
                  }).then(function (response) {
                    console.log(response);
                  }).catch(function (error) {
                    console.log(error);
                  });
            }


            //使用params
            deleteDataByParams(){
                 this.axios.delete('/user', {
                    params:{
                        id:1
                    }
                  }).then(function (response) {
                    console.log(response);
                  }).catch(function (error) {
                    console.log(error);
                  });
            }
        }
    }
</script>