Vue应用axios实现Ajax请求

axios是一个基于promise的HTTP客户端，它的主要特点如下:

1. 从浏览器中创建XMLHttpRequest
2. 从node.js发出HTTP请求
3. 支持Promise API
4. 拦截请求和响应
5. 转换请求和响应数据
6. 取消请求
7. 自动转换JSON数据
8. 客户端支持防止CSRF/XSRF

引入方式

使用cdn

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

或者： 

<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

使用npm

npm install axios

 Get请求和Post请求

 使用axios发送Get和Post请求分别有两种格式:

格式一： 

    //Get请求
    axios({
        method:'get',   //请求方式
        url:'XXX.XXX',  //请求路径
        params:{name:'蔡某坤',sex:'gay',hobby:'rap'}    //发送的数据
    })
    .then(function(response){
        //请求成功，处理业务逻辑
    })
    .catch(function(error){
        //请求失败，处理业务逻辑
    })

    //Post请求
    axios({
        method:'post',   //请求方式
        url:'XXX.XXX',  //请求路径
        data:'name=蔡某坤 & sex=gay'    //发送的数据
    })
    .then(function(response){
        //请求成功，处理业务逻辑
    })
    .catch(function(error){
        //请求失败，处理业务逻辑
    })

格式二：

//Get请求
    axios.get('请求路径',{
        params:{    //发送的数据
            name:'蔡某坤',
            sex:'gay',
            hobby:'basketball'
        }
    })
    .then(function(response){
        //请求成功，处理业务逻辑
    })
    .catch(function(error){
        //请求失败，处理业务逻辑
    })

    //Post请求
    axios.post('请求路径','name=蔡某坤 & sex=gay')
    .then(function(response){
        //请求成功，处理业务逻辑
    })
    .catch(function(error){
        //请求失败，处理业务逻辑
    })

回调接收，.then方法用于处理请求成功的回调函数，.catch方法用于处理请求失败的回调函数。

这两个回调函数都有各自独立的作用域，直接在函数内部使用this并不能访问到Vue实例，这时只需要在回调函数的后面添加 .bind(this) 就能解决这个问题，或者将其内部函数改为 response => ()的格式。

使用示例：

<div id="element">
    <p>{{name}}</p>
    <p>{{motto}}</p>
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script type="text/javascript">

    //创建根实例
    var demo = new Vue({
        el: '#element',
        data: {
            name: '',
            motto: ''
        },
        mounted: function () {
            axios({
                method: 'get',
                url: 'http://60.205.187.0/vue/test.php',
                params: { name: '蔡某坤', sex: 'gay', hobby: 'rap' }
            })
                .then(
                    function (response) {
                        this.name = response.data.name;
                        this.motto = response.data.motto;
                    }.bind(this)    //如果不加.bind(this)无法访问实例的数据
                )
                .catch(function (error) {
                    console.log(error)
                })

        //     axios.post('http://60.205.187.0/vue/test.php', 'name=蔡某坤 & sex=gay')
        //         .then(response => (         //如果不使用response=>()的方式则无法访问Vue实例
        //             this.name = response.data.name,
        //             this.motto = response.data.motto
        //         ))
        //         .catch(function (error) {
        //             console.log(error)
        //         })
        // }

    })

</script>

 

对应的php文件：

<?php

    header('Access-Control-Allow-Origin:*');

    $methodName = strtolower($_SERVER['REQUEST_METHOD']);
    
    if ($methodName == "options") {
        exit;
    }
    $result=( array('code'=>'1','message'=>'success','name'=>'真ikun粉丝','motto'=>'就算是全世界的人都在黑蔡某坤，我也会义无反顾地站在全世界这边') );

    echo json_encode($result,JSON_UNESCAPED_UNICODE);
    
?>