11 数据请求axios

编辑本文章

官网

1、下载安装axios

 　　我们用django做的后端，需要自己写一个中间件来规避以下错误（axios应该有其他方法）

from django.utils.deprecation import MiddlewareMixin
class AccessCAO(MiddlewareMixin):
    def process_response(self,request,response):
        response['Access-Control-Allow-Origin']="*"
        return response
View Code

post请求需要关闭django的CSRF校验规避以下问题

　　处理方法

发送get和post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title>19 axios数据请求</title>
</head>
<body>

<div id="app"></div>

<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/axios/dist/axios.js"></script>

<script type="application/javascript">
    var App={
        template: `<div>
            <button @click="sendGet">发送get请求</button>
            <button @click="sendPOST">发送post请求</button>
            <div v-html="msg"></div>
            </div>`,
        data(){
            return {
                msg:''
            }
        },
        methods:{
            sendGet(){
                axios.get('http://127.0.0.1:8000/luf/').then(
                    res=>{
                        this.msg=res.data;
                    }
                ).catch(
                    err=>{
                        console.log(err);
                    }
                )
            },
            sendPOST(){
                var params=new URLSearchParams();
                params.append("name","ya");
                params.append("age",18);
                axios.post('http://127.0.0.1:8000/luf/',params).then(
                    res=>{
                        this.msg=res.data;
                    }
                ).catch(
                    err=>{
                        console.log(err)
                    }
                )
            }
        }
    };
    new Vue({
        el:"#app",
        template:`<App/>`,
        components:{
            App:App
        },
        data(){
            return {

            }
        }
    })
</script>
</body>
</html>
View Code

2、全局配置

注册为全局组件后，在组件内部可以用this.$axios来获取axios实例

3、解决this的志向问题

1、使用箭头函数=>（推荐使用）

2、在外部var一个_this变量存储this

 

posted @ 2019-06-14 14:26  丫丫625202  阅读(138)  评论(0)  编辑  收藏  举报