同源&跨域和同步&异步

同源&跨域

1.同源

是什么？
浏览器的同源策略
同一协议，同一域名，同一端口号。
当其中一个不满足时，我们的请求即会发生跨域问题。
为什么？
浏览器为了保护服务器。
ps：服务器没有同源策略，没有跨域问题
存在问题？
和服务器的数据交换出现问题

2.跨域

解决方案
1.服务器：
（1）.设置请求头
（2）.使用cors进行配置
2.本地服务器代理：
webpack——devServer——proxy
3.JSONP：
实现原理：如img、script标签的src属性，在获取远程数据时，是没有跨域问题的

同步&异步

1.同步

是什么？
通常情况下代码从上到下依次执行
前边的代码不执行后边的代码也不会执行
问题？
出现代码阻塞

console.log("111111")
a()
console.log("333333333")
function a(){
    const begin = Date.now()
    // 让程序停5秒
    while(Date.now() - begin < 5000){
}
console.log('2222222');
}

解决同步问题——异步

2.异步

是什么？
一段代码的执行不会影响到其他的程序

console.log("111111")
a()
console.log("333333333")

function a() {
    setTimeout(() => {
        console.log('2222222');
    }, 5000);
}

问题？
无法通过return获得返回值

console.log("111111")
const result = a(1,2)
console.log(result);
console.log("333333333")

function a(a,b){
    setTimeout(() => {
        return a+b
    }, 5000);
}

解决异步问题——回调函数

3.回调函数

console.log("111111")

const res = a(1,2,(result)=>{
    console.log('result',result);
})
console.log("333333333")

function a(a,b,cb){
    setTimeout(() => {
        cb(a+b) 
    }, 5000);
}

回调地狱

console.log("111111")

const res = a(1,2,(result)=>{
    console.log('result',result);
    a(result,3,(result2)=>{
        console.log('result2',result2);
        a(result2,4,(result3)=>{
            console.log('result3',result3);
        })

    })
})
console.log("333333333")

function a(a,b,cb){
    setTimeout(() => {
        cb(a+b) 
    }, 2000);
}