promise 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 
        异步函数是基于 promise之上的一种新的异步结果方案
        把异步的写法变成同步的写法

        异步请求(接口, 成功回调, 失败回调)

        异步请求(接口).then(成功函数).catch(失败函数)

        async function getData () {
        try {
            const 结果1 = await 异步请求(接口)
            const 结果2 = await 异步请求(接口)

            对结果进行处理
        } catch (err) {
            // 对错误信息的处理
        }
        }
        getData()




        dispatch 获取action里的结果
        在action里函数里返回一个Promise对象
        在dispatch里可以用.then进行下一步的操作

        action () {
          return new Promise((resolve, reject) => {
            axios.get('接口').then(res => {
              // 对res进行处理
              resolve()
            }).catch(() => {
              reject()
            })
          })
        }


        this.$store.dispatch('action').then(() => {
            
        }).catch(() => {

        })
     -->
</body>
<script src="../js/vue.js"></script>
<script>
    function get (url) {
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.open('get', 'url', true);
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status ===200 ) {
                    // callback && callback(JSON.parse(xhr.responseText))
                    // 上面的这种写法相当于
                    // if (callback) {
                    //     cakllback()
                    // }
                    resolve(JSON.parse(xhr.responseText));//相当于回调函数  .then里面的函数
                } else if (xhr.readyState === 4 && (xhr.status > 300 || xhr.status < 200) ) {
                    reject();
                }
            }
        })
    }
    //异步的请求  同步的写法
    async function getData () {
        try {   //对错误进行捕获
            const res1 = await get('http://localhost/demo.php?demo1');
            const res2 = await get('http://localhost/demo.php?demo2');
        } catch (err) {
            console.log(err)
        }
    }
    getData()



    //promise对象
    // const p = new Promise((resolve, reject) => {
    //     resolve();
    // });
    // console.log(p);
</script>
</html>

 

posted @ 2019-01-07 16:42  宝2333  阅读(104)  评论(0)    收藏  举报