Vue.js入门教程（十一）异步交互

2019-10-06 本文已影响0人党云龙

第十一章：AJAX异步交互

有话说在前面

兄弟如果你看到了这里，你现在距离完全会用vue已经非常接近了。在vue中，他自己有一套专门解决跨域，和ajax的组件，名字叫做axios。

axios

你可能会问，vuecli里面其实完全可以再装一个jquery。我用惯了$.ajax，为什么还要用这个Axios。

其实你说的完全没错，因为vue本身跟react和angular的最大区别就再于，它并不是一个嵌入式框架，它对js和dom本身的管理非常宽松。你愿意再内置一个jquery，用jquery做特效，用vue管理数据。两个框架配合，那也完全没有问题。
但是你得清楚不是每个人都有能力同时掌握两种框架。本着用就用一套的强迫症心里，我推荐你还是使用axios。虽然乔丹的衣服便宜，但是我更重nike上脚以后实战。毕竟老子来打球就是为了得分。

说了半天，你还没有告诉我，到底Axios是干什么的。他其实就是用来管理接口的，你可以理解为他就是jquery中的ajax方法。
Axios本身是基于es6的。所以在他同时有.then和catch两个方法，then里面的参数是response，catch里面的参数是error。如果你对es6还不太熟悉，请查阅我的后续es6教程。

首先安装axios，你不通过npm安装直接引入也完全没问题。

开始安装

1.直接在页面引入：

<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

用的时候直接按照es6那样用就行了：
.then后面就是成后后的回调方法，然后response就是返回值。

axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

实际例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>党云龙vue教程-axios</title>
    </head>
    <body>
        <div id="app">
            <div>{{message}}</div>
        </div>
        
        <script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script>
        <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
        
        <script>
            new Vue({
                el:"#app",
                data:{
                    message:3
                },
                methods: {
            
                },
                mounted: function() {
                    var that = this;
                    axios.get('/user?ID=12345').then(function (response) {
                        that.message = "ajax获取成功！"
                    })
                }
            })
        </script>
    </body>
</html>

到这里，你已经可以正常的获取到ajax数据了。

2.通过npm来安装

注意：如果你对npm包管理不熟悉，建议你跳过这一章，先阅读后面关于vuecli的使用方法的章节！

npm install axios -s-d

接下来在你的项目中引用这一步是要放在main.js中的

import axios from 'axios'
Vue.prototype.axios = axios

使用的时候只需要这样调用一下即可。

this.axios({
    method: 'post',
    url: 'dangyunlong/find.php',
    params: {
        pages: 1
    }
}).then(function(response) {
    console.log(response);
})

修改proxyTable配置

但是注意，如果你是在vuecli中，你直接访问你的域名是不行的，会遇到跨域的问题，此时
你需要修改config下的index.js

proxyTable: {
    '/dangyunlong': {
        target: 'http://www.dangyunlong.com/',
        changeOrigin: true,
        pathRewrite: {
            '^/dangyunlong': ''
        }
    }
},

注意这里的/dangyunlong 跟你在axios中请求的需要是一样的。
调用的时候/可以省略。

另外注意

有的时候，你再页面中直接生成了data.data中的值这个时候会报错undefined

那是因为你这个数据，的容器上面没有v-if 就是，有数据的时候，才渲染，没有数据的时候就不应该渲染出来。
不要直接再页面上渲染一个不存在的值，例如说data.data.val 这个值是ajax取回来的，你直接{{data.data.val}}
就会报错。因为刚开始渲染的时候值还不存在呢。。

你只有一种办法就是，你先声明一个值val:1，然后再ajax的回调函数中赋值：this.val = this.data.val
这样就不会报错了