axios发送post请求 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios</title>
</head>
<body>
    <div id="app"></div>
    <script type= "text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>
    <script type="text/javascript">
        var App = {
            data(){
                return{
                    msg:''
                }
            },
            template:`
                <div>
                    <button @click='sendAjax'>发Get请求</button>
                    <h3>{{msg}}</h3>

                    
                    <button @click='sendAjaxByPost'>发Post请求</button>
                    <h3>{{msg}}</h3>
                </div>
            `,
            methods:{
                sendAjax(){
                      axios.get('http://127.0.0.1:8081/create')
                      .then(res=>{   
                          console.log('这是成功',res);
                          console.log('这是成功res.data',res.data)
                          console.log('这是typeof',typeof res.data)
                          this.msg = res.data;
                        //   this.msg = '你好啊';

                      })
                      .catch(err=>{
                          console.log('这是错误',err)
                      })
                    },
                sendAjaxByPost(){
                   // var params = new URLSearchParams() ;
                   // params.append('name','alex');
                    axios.post('http://127.0.0.1:8800/create',{"name":"alex"}).
                        then( function(res) {
                            console.log(res);
                            }).catch(err=>{
                                console.log(err);
                            })
                }
            }
        }

        new Vue({
            el:"#app",
            data(){
                return {
                        
                }
            },
            components:{
                App
            },
            template:'<App/>'
        })
    </script>
</body>
</html >

会报错

post请求,发送数据会报错,不能直接携带数据,要加URLSearchParams处理下才行

var params = new URLSearchParams() ;
params.append('name','alex');

修改之后

               sendAjaxByPost(){
                    var params = new URLSearchParams() ;
                    params.append('name','alex');
                    axios.post('http://127.0.0.1:8800/create',{"name":"alex"}).
                        then( function(res) {
                            console.log(res);
                            }).catch(err=>{
                                console.log(err);
                            })
                }

由于axios在整个项目中是局部作用域,避免多次重复导入axios模块,可以用vue和它绑定一起

1,//方式1: 解决this的指向问题,在vue中用函数建议使用箭头函数
2,var _this = this // //解决this指向问题方法二

<!-- vue和axios都是全局的对象未来axios会成为局部作用域-->
    <script type="text/javascript">
        //挂载Vue.prototype.$axios = axios;使用插件
        Vue.prototype.$axios = axios;

        //配置公共的ur1
        axios.defaults.baseURL = 'http://127.0.0.1:8800';

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios</title>
</head>
<body>
    <div id="app"></div>
    <script type= "text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>


    <!-- vue和axios都是全局的对象,未来axios会成为局部作用域-->
    <script type="text/javascript">
        //挂载Vue.prototype.$axios = axios;使用插件
        Vue.prototype.$axios = axios;

        //配置公共的ur1
        axios.defaults.baseURL = 'http://127.0.0.1:8800';


        var App = {
            data(){
                return{
                    msg:''
                }
            },
            template:`
                <div>
                    <button @click='sendAjax'>发Get请求</button>
                    <h3>{{msg}}</h3>                    
                    <button @click='sendAjaxByPost'>发Post请求</button>
                </div>
            `,
            methods:{
                sendAjax(){//方式1: 解决this的指向问题,在vue中用函数建议使用箭头函数
                      axios.get('http://127.0.0.1:8081/create')
                    // this.$axios.get('http://127.0.0.1:8081/create')  // 挂载之后使用this.$axios
                    //   .then(res=>{    //方式1: 解决this的指向问题,在vue中用函数建议使用箭头函数
                        .then(function(res){   // 传统函数function(res) this变成了windows对象了 , 初学者容易犯的错
                          
                          console.log('这是成功',res);
                          console.log('这是成功res.data',res.data)
                          console.log('这是typeof',typeof res.data)
                          console.log('这是this',this) //  传统函数function(res) this变成了windows对象了
                        //    传统函数function(res) this变成了windows对象了, 初学者容易犯的错 解决this指向问题
                          this.msg = res.data;
                        //   this.msg = '你好啊';

                      })
                      .catch(err=>{
                          console.log('这是错误',err)
                      })
                    },
               sendAjaxByPost(){
                   var _this = this //    //解决this指向问题方法二
                    var params = new URLSearchParams() ;
                    params.append('name','alex');
                    // axios.post('http://127.0.0.1:8800/create',{"name":"alex"}).
                    this.$axios.post('http://127.0.0.1:8800/create',{"name":"alex"}).
                        then( function(res) {  //  传统函数function(res) this变成了windows对象了
                            console.log(res);
                            _this.msg =  res.data;   //解决this指向问题方法二
                            }).catch(err=>{
                                console.log(err);
                            })
                }
            }
        }

        new Vue({
            el:"#app",
            data(){
                return {
                        
                }
            },
            components:{
                App
            },
            template:'<App/>'
        })
    </script>
</body>
</html >
posted @ 2021-08-19 12:54  ty1539  阅读(2144)  评论(0)  编辑  收藏  举报