vue学习十二：axios学习

axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

axios常用的api：

在html代码中添加一些按钮辅助验证：

<button onclick="getaxios()">getaxios</button>
<button onclick="postaxios()">postaxios</button>
<button onclick="comaxios()">comaxios</button>
<button onclick="allaxios()">allaxios</button>
<button onclick="cusAxios()">cusAxios</button>
<button onclick="interceptor()">interceptor</button>

执行 GET 请求：

function getaxios() {
    axios.get('./axios.php', {
            params: {
                type: 'top'
            }
        })
        .then(function(response) {
            console.log(response);
        })
        .catch(function(err) {

        });
}

执行 POST 请求：

function postaxios() {
    axios.post('./axios.php', {
            type: 'top'
        })
        .then(function(response) {
            console.log(response);
        })
        .catch(function() {})
}

通过向 axios 传递相关配置来创建请求：

function comaxios() {
    // 通过config对象来配置axios请求
    axios({
            method: 'post',
            url: './axios.php',
            data: {
                type: 'top'
            }
        })
        .then(function(response) {
            console.log(response);
        })
        .catch(function() {

        })
}

多个并发请求：

function allaxios() {
    function getAxios1() {
        return axios.get('./axios.php?type=top');
    }

    function getAxios2() {
        return axios.get('./axios.php?type=yule');
    }

    axios.all([getAxios1(), getAxios2()]).then(axios.spread(function(data1, data2) {
        console.log(data1);
        console.log(data2);
    }))
}

创建axios实例：

function cusAxios() {
    var instance = axios.create({
        url: './axios.php',
        timeout: 3000,
        method: 'post',
        params: {
            type: 'top'
        }
    });
    instance.get();
    instance.request();
}

配置的优先顺序：

在创建实例时配置的属性值和全局配置的属性值最后会合并在一起，这时就会产生配置的优先级问题。

拦截器：

在请求或响应被 then 或 catch 处理前拦截它们。比如在请求或者响应之前需要加一个页面缓冲动画，就需要使用到拦截器。

function interceptor() {
    var instance = axios.create({
        url: './axios.php',
        timeout: 3000,
        method: 'post',
        params: {
            type: 'top'
        }
    });
    instance.interceptors.request.use(config => {
        console.log(111);
        // 设置一些加载动画等操作
        return config;
    });
    // .get .post
    instance.request().then(function(data) {
        console.log(data);
    }).catch();
}

在vue中使用axios：

注意：

1.axios不支持Vue.use（）方法

import axios from 'axios'
// 将axios绑定在vue原型上,这样可以在其他组件中通过this.$axios使用axios
Vue.prototype.$axios = axios;

2.当使用vue-cli前端调用后端数据接口时会有跨域问题

在webpack配置文件中加入：

dev: {
    proxyTable: {
        // 设置调用的接口域名和端口号 注意加http
        target: 'http://vue.studyit.io/api/',
        pathRewrite: {
            // 用/api代替target里面的url,后面我们在发送请求时,直接使用api
            '^/api': '/'
        }

    }
}

发送请求:

getData(){
    // 发送请求
    this.$axios.get('./api/getnewslist',{
        params:{}
    }).then(function(response){
    console.log(response);
    })
}