首页 > 移动平台 > 详细

ES6---axios执行原理

时间:2020-04-18 02:16:51      阅读:80      评论:0      收藏:0      [点我收藏+]

ES6---axios执行原理

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

http://www.axios-js.com/zh-cn/docs/

技术分享图片

 

 

 


 

1. 

    axios.get(‘1111.json‘)
        .then(response => {
            console.log(response.data);

        })
        .catch(error => {
            console.log(error);
        });

 

console:

技术分享图片

 

2. 

    axios.get(‘1111.json‘)
        .then(response => {
            console.log(response.data);

        })
        .catch(error => {
            console.log(error);
        });

    console.log(123);

 

console:

技术分享图片

3. axios.get相当于new了一个promise,具体如下图:

技术分享图片

 

4.

    async function tt() {
        await axios.get(‘1111.json‘)
            .then(response => {
                console.log(response.data);
            })
            .catch(error => {
                console.log(error);
            });
        console.log(123);
    };
    tt();

 

console:

 

技术分享图片

 

 

5. 用await 先取出了数据

    async function tt() {
        await axios.get(‘1111.json‘)//先取出了数据
            .then(response => {
                console.log(response.data);
            })
            .catch(error => {
                console.log(error);
            });
        document.getElementById("aa").innerHTML = ‘<div>123</div>‘;
    };
    tt();

 

console:

技术分享图片

 

 

6. 用await先获取数据,不然就先执行后面的:document.getElementById("aa").innerHTML = ‘<div>‘ + yy + ‘</div>‘;

    var yy = ‘‘;
    async function tt() {
        await axios.get(‘1111.json‘)//先通过URL从服务器获取数据,再显示到页面
            .then(response => {
                yy = response.data.username;
                console.log(response.data);
            })
            .catch(error => {
                console.log(error);
            });
        document.getElementById("aa").innerHTML = ‘<div>‘ + yy + ‘</div>‘;
        //用了await就先获取数据了
    };
    tt();

 

7. 或者把DOM操作的放在axios里面也可以 (前提内嵌的不是很复杂,很复杂的放在外面用await比较好)

    var yy = ‘‘;
    async function tt() {
        await axios.get(‘1111.json‘)//先通过URL从服务器获取数据,再显示到页面
            .then(response => {
                yy = response.data.username;
                console.log(response.data);
                document.getElementById("aa").innerHTML = ‘<div>‘ + yy + ‘</div>‘;
            })
            .catch(error => {
                console.log(error);
            });

    };
    tt();

 

ES6---axios执行原理

原文:https://www.cnblogs.com/jane-panyiyun/p/12723487.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!