async函数

async函数

es7新增的异步编程的终极方案

async函数的作用是什么

内部可以使用await

await表达充当.iten的效果

等待后边的什么？1Promise对象

返回值是什么？Promise对象中的then里面的东西

写在哪里？只能写在async函数内部

<script src="./lib/axios.js"></script>
<script>
  // 方法名 2秒之后成功
  function delay2() {
    // 返回Promise对象
    return new Promise(resolve => {
      // 延迟2秒钟 成功
      setTimeout(() => {
        resolve('我成功啦😁')
      }, 2000)
    })
  }

  /*
    1. async 写在声明函数的位置,最近一级的函数声明前边
    2. await 写在async修饰的函数内部
    3. await后面跟上Promise对象
    4. await 等待后面的Promise对象 成功(.then)
    5. 让代码写起来 和同步代码 一样
  */
  async function asyncCall() {
    console.log('calling')
    const result = await delay2()
    console.log(result)
    const result2 = await delay2()
    console.log(result2)
    const result3 = await delay2()
    console.log(result3)
    console.log('bottom')
  }
  asyncCall()

  // 跟机器人聊天
  /*
    1. await 放在async修饰的函数种
    2. await要跟上Promise对象
    3. await 等待Promise 成功,并获取then中的值,赋值给左边的变量
  */
  // async function chatRobot() {
  //   const res1 = await axios({ url: 'http://ajax-api.itheima.net/api/robot', params: { spoken: '肚子饿了吗?' } })
  //   console.log('res1:', res1.data.data.info.text)
  //   const res2 = await axios({ url: 'http://ajax-api.itheima.net/api/robot', params: { spoken: '准备吃点啥呢?' } })
  //   console.log('res2:', res2.data.data.info.text)
  //   const res3 = await axios({ url: 'http://ajax-api.itheima.net/api/robot', params: { spoken: '要不要一起吃饭?' } })
  //   console.log('res3:', res3.data.data.info.text)
  // }
  // chatRobot()
</script>

async函数-异常捕获

<script src="./lib/axios.js"></script>
<script>
    // try-catch捕获异常
    // try {
    //     console.log(uname) //异常代码，或者怀疑是否是正确的代码
    // } catch (err){
    //     console.dir(err)
    //     alert(err.message())
    // }
    // console.log(999)
    const get = async () => {
        try {
            const res = await axios({
                url : `http://ajax-api.itheima.net/api/books`
            })
            console.log(res)
        } catch (err) {
            console.log(err)  //如果接口错误的话走这里
        } finally {
            console.log(`成功失败都会走`)
        }
    }
    get()
    async function git() {
        const dd = await axios({
            url:`http://ajax-api.itheima.net/api/books`,
        })
        console.log(dd)
    }
    git()
    gd = async function () {
        try {
            let arr = await axios({
                url : `http://ajax-api.itheima.net/api/books`
            })
            console.log(arr)
        } catch (err) {
            console.log(err) //错误走我这里
        } finally {
            console.log(`对错都走我这里`)
        }
    }
    gd()
</script>

saync函数-返回值

<script>
    function timeOutPro(delay) {
        // 返回Promise对象
        return new Promise(resolve => {
            // 延迟2秒钟 成功
            setTimeout(() => {
                resolve(`延迟了${delay}秒`)
            }, delay * 1000)
        })
    }

    // await 可以等待 Promise完成
    // async function func1() {
    //     const res1 = await timeOutPro(1) // 1s
    //     console.log('res1:', res1)
    //     const res2 = await timeOutPro(2) // 3s
    //     console.log('res2:', res2)
    // }
    // async function func2() {
    //     const res3 = await timeOutPro(3) // 2s
    //     console.log('res3:', res3)
    //     const res4 = await timeOutPro(4) // 4s
    //     console.log('res4:', res4)
    // }
    // func1()
    // func2()

    async function func1() {
        const res1 = await timeOutPro(1) // 1s
        console.log('res1:', res1)
        const res2 = await timeOutPro(2) // 3s
        console.log('res2:', res2)
    }
    async function func2() {
        const res3 = await timeOutPro(3) // 2s
        console.log('res3:', res3)
        const res4 = await timeOutPro(4) // 4s
        console.log('res4:', res4)
    }
    // func1()
    // func2()
    async function sum() {
        await func1()  //await表示等待的意思，等待这个代码执行完毕以后，在执行后边的代码
        await func2()
    }
    sum()
    // await 可以等待 Promise完成
    // async function func1() {
    //     const res1 = await timeOutPro(1).then(
    //     const res2 = await timeOutPro(2) // 3s
    //     ){
    //     console.log('res2:', res2)
    //     }
    // }
    // async function func2() {
    //     const res3 = await timeOutPro(3) // 2s
    //     console.log('res3:', res3)
    //     const res4 = await timeOutPro(4) // 4s
    //     console.log('res4:', res4)
    // }
    // func1()
    // func2()

</script>

同源策略

<center>
  同源策略 <br>
  如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源 <br>
  同源策略是浏览器提供的一个安全功能 <br>
  MDN官方给定的概念：同源策略限制了从同一个源加载的文档或者脚本如何与来自另一个源的资源进行交互，这是一个用于隔离签字啊恶意文件的重要安全机制
  <br>
  通俗理解，浏览器规定，A网站的Javascript，不允许和非同源的网站C之间，进行资源的交互，例如： <br>
  1，无法读取非同源网页的Cookie，LocalSyorage和indexedDB <br>
  2，无法接触非同源网页的DOM <br>
  3，无法完成非同源地址发送Ajax请求 <br>
  跨域 <br>
  什么是跨域 <br>
  同源指的是两个URL的协议，域名，端口一致，反之，则是跨域 <br>
  出现跨域的根本原因：浏览器的同源策略不允许非同源的URL之间进行资源的交互 <br>
  注意点：浏览器允许发起跨域请求，但是跨域请求回来的数据，会被浏览器拦截，无法被页面获取到 <br>
  如何实现跨域数据请求 <br>
  现如今，实现跨域数据请求，最主要的两种方案，JSONP和CORS <br>
  JSONP只支持get请求，不支持POST请求 <br>
  CORS，出现的比较晚，不兼容低版本浏览器 <br>
</center>