axios 学习

Posted on 2018-01-19 22:47 ZMQM 阅读(209) 评论(0) 收藏举报

首先 axios 是一个http的库，所以要在nodejs 和浏览器中

在服务器中运行玩，就要先在本地配置phpStudy wamp 等一些虚拟的服务

然后配合vue 本地就可以玩了

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
  <div id="box">

    {{mes}}

      <input type="submit" value="get请求" @click="get">
        <input type="submit" value="post请求" @click="post1">
  </div>
    <script>
   var vm =  new Vue({
        el:'#box',
        data:{
            mes:"大家好"
        },
        methods:{
            get:function(){
               axios.get('./user/data.php')
               .then(function(response){
                console.log(response);
               })
               .catch(function(error){
                console.log(error)
               })
            },
            post1:function(){
                axios.post('./user/post.php',{
                    name:'zmq',
                    password:'123'
                })
                .then(function(res){
                    console.log(res)
                })
                .catch(function(error){
                    console.log(error)
                })
            }
        }

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

　　get （） post （）中的文件时自己创建的两个很基础的php文件，post请求，php中需要接收一下post传的参数

然后就ok了，一开始很懵逼，也找不到适合自己这个菜鸟学习的手册讲的更详细一些的东西

axios的并发请求

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
  <div id="box">

    {{mes}}

      <input type="submit" value="get多请求" @click="get">
  </div>
    <script>
   var vm =  new Vue({
        el:'#box',
        data:{
            mes:"大家好"
        },
        methods:{
           get:function(){
             function getUserAccount(){
              return axios.get('./user/data.php');
             }
             function getUserPermissions(){
              return axios.get('./user/data1.php');
             }
             axios.all([getUserAccount(),getUserPermissions()])
             .then(axios.spread(function(acct,perms){
               //然后两个并发请求就执行了
             }))
           }
        }

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

执行结果

这样就成功了

刷新页面返回顶部

金爵小菜鸟

axios 学习