Vue学习之promise

　　先解决前面留下的一个问题，如果引用的文件路径太长了，我们反复引用类似的文件太麻烦了，所以我们需要给一些文件起别名。

<img slot="item-icon-active" src="./assets/img/tabbar/money-active.svg" alt="">

　　这里我们希望src中的内容能够更加简短一些，所以我们要找到这个配置文件build下面的webpage.base.conf.js。在这个文件中我们能够找到配置别名的地方：

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),   //@代替src
      'assets':resolve('src/assets'),    //assets代替src/assets
    }
  },

　　alias中的内容就是了，我们添加了assets的内容后上面的img可以用下面的代码替换掉：

<img slot="item-icon-active" src="~assets/img/tabbar/money-active.svg" alt="">

　　这里注意要加上波浪号~来让代码识别出这个assets才可以。

 

　　开始学习Promise。Promise是Es6中的语法，它是异步编程的一种解决方案。我们比较常见的是在网络请求中，用户发送网络请求的时候我们不会让用户阻塞在那，而是希望继续和用户交互，等网络请求回来的时候再回调一个函数。

　　Promise的基本语法：

　　假设有异步操作：一次setTimeout假设是一次网络请求

        setTimeout(()=>{
            console.log("helloworld")
        },1000)

　　函数Promise传入的两个参数resolve和reject都是函数

        new Promise((resolve,reject)=>{

        })

　　实际写成：

        new Promise((resolve,reject)=>{
            //第一次网络请求的代码
            setTimeout(()=>{
                resolve()
            },1000)
        }).then(()=>{
            //第一次拿到结果的代码
            console.log("hellow world")
            console.log("hellow world")
            console.log("hellow world")
            console.log("hellow world")

            return new Promise((resolve,reject)=>{
                //第二次网络请求的代码
                setTimeout(()=>{
                resolve()
                },1000)
            }).then(()=>{
                //第二次拿到结果处理的代码
                console.log("hello js")
                console.log("hello js")
                console.log("hello js")
            })
        })

　　感觉是看上去复杂了，但是实际是清晰了，因为所有网络请求的代码都在promise下面，所有的结果处理代码都划分到了then里面。结果处理完成后跟一个return就可以接下一次的请求。无论是多少次我们都可以按照顺序看到内容，这种就是链式编程。

　　什么情况下会用到Promise？一般是有异步操作时候使用Promise对即将进行的异步操作进行封装。一旦有异步操作的时候用promise包起来，拿到结果之后不要在回调函数中处理，用resolve包起来之后在then中进行处理。成功的时候用resolve，失败的时候就把错误信息放在reject中然后在then的同级使用.catch来处理。