跨域问题以及解决方式

跨域

浏览器的同源政策

处于安全性的考虑 他只允许对应的俩者是同源的内容进行交互和访问

不同源的内容不允许访问

跨域问题 （同源政策的影响）

访问协议不同 http https

域名不同 百度 搜狐

端口号不同 5500 120

cors 跨域

解决方法

1.添加请求头 后端添加请求头 access-control-allow-origin:* 跨域的地址

2.前端也可以添加请求头 setRequestHeader

3.jsonp形式 利用 link script ifarme 这些标签不受跨域的影响 利用script标签（只能解决get请求跨域）

利用了script标签链接对应的地址 然后让这个链接的地址给我们执行访问

script 标签不遵从跨域 所以我们可以内部访问 js添加我们对应的方法 执行我们对应的传入的方法

1.创建方法 回调方法

2.将方法添加到window里面

3.将方法名和对应方法传入

<script>
	function a(str){//str响应的数据
        console.log(str)
    }
    window["abc"] = a
</script>
<!-- JSONP的方式 需要后端的支持 -->
<!-- abc方法被解析了 后端调用的abc -->
<script scr="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=abc&wd=hello"></script>

jsonp封装方法

function jsonp({
    url, //链接地址
    params,//参数 对象类型
    callbackName,//回调函数名字
    callback //回调函数
}){
    //1.给window添加方法 方法名应该不能重复
    //随机生成一个函数名
    let fnName = "fn"+Date.now()+Math.ceil(Math.random()*10000)
    //将对应回调函数添加给window 添加的函数名随机生成
    window[fnName] = callback
    //2.添加script
    let script = document.createElement('script')
    //3.将方法名拼接到url地址后面
    url += `?${callbackName}=${fnName}`
    //4.将参数再做拼接
    let paramsStr = joinParams(params)
    url += paramsStr
    //5.将这个url地址给script标签 src属性
    script.src = url
    //6.将script加给body
    document.body.appendChild(script)
    //判断是否已经加载成功
    script.onload = function(){
        script.remove()
        delete window[fnName] 
    }
}
function joinParams(params){
      let str = ""
      //取出对象里面的值
      for(let key in params){
        str+=`&${key}=${params[key]}`
    }
    return str
}

jsonp的promise封装

promise里的success代替callback

success传递响应数据给then来实现功能

function jsonp({
    url, //链接地址
    params,//参数 对象类型
    callbackName,//回调函数名字
}){
    return new Promise((success,error)=>{
       try{
            //1.给window添加方法 方法名应该不能重复
            //随机生成一个函数名
            let fnName = "fn"+Date.now()+Math.ceil(Math.random()*10000)
            //将对应回调函数添加给window 添加的函数名随机生成
            window[fnName] = success //传递给.then方法的参数是success来传递
            //2.添加script
            let script = document.createElement('script')
            //3.将方法名拼接到url地址后面
            url += `?${callbackName}=${fnName}`
            //4.将参数再做拼接
            let paramsStr = joinParams(params)
            url += paramsStr
            //5.将这个url地址给script标签 src属性
            script.src = url
            //6.将script加给body
            document.body.appendChild(script)
            //判断是否已经加载成功
            script.onload = function(){
                script.remove()
                delete window[fnName] 
            }
            //如果加载出错的话 报错
            script.onerror = function(){
                error("加载问题")
            }
       }catch{//捕获错误
         error("兄弟 脑子在想啥！！！")
       }
    })
}
function joinParams(params){
      let str = ""
      //取出对象里面的值
      for(let key in params){
        str+=`&${key}=${params[key]}`
    }
    return str
}

捕获异常

try { //填写可能出错的代码
    //这个里面可能会报错
    console.log("hello");
    throw new Error("长的太帅") //抛出一个错误异常
} catch (error) {
    //捕获错误 只有错误才能进入  处理错误
    console.log("中国人不骗中国人");
    //进行处理
} finally{
    //不管是否错误都会执行的代码块
    console.log("小日子过得不错");
}
//finally 一般不用他有性能问题 try catch 也会影响性能

async和await

async 是用于修饰函数 返回值是一个promise对象 async替代了promise

await是async里面一个修饰符 当他修饰一个promise对象的时候 他会获取程序的控制权 直到完成或失败结束

await替代了promise中的.then

await关键字只在async函数内有效

<button>按钮</button>
<script>
    document.querySelector("button").onclick = function() {
        (async function name() {//这个函数调用返回值是一个promise对象     
            await a('张三', 3000)
            await a('李四', 2000)
            await console.log('哈哈哈');
            console.log("123");
        })()
    }

    function a(str, time) {
        return new Promise((success, error) => {
            setTimeout(() => {
                console.log("点击了" + str);
                success()
            }, time)
        })
    }
</script>