promise，async-await 和 跨域问题的解决--代理服务器的原理

Promise的前世于今生

1.  纯回调 --   会造成回调地狱，请求结果出现在回调函数之前
2. promise对于纯回调改进： 解决   回调地狱（代码可读性差），回调函数的指令更加灵活
3. async await：消灭回调，解决异步效果  await以下 的内容相当于.then，catch的内容相当于.catch
    同步代码解决异步效果
    await后面一般是promise对象，等待成功的结果，await后面如果没有promise相当于没有await
函数调用本质是表达式，axios函数调用的结果是promise
axios是原生xhr和promise 的封装体
await等待成功的结果
 

跨域

    http请求分为两大类请求：普通请求和ajax请求
        普通请求不会跨域   （特点是刷新页面）
        ajax才会出现跨域   （局部更新，不刷新页面）

    什么跨域：
        违背浏览器上的同源策略，就称作跨域
        只有浏览器才会出现跨域

    什么是同源
        协议 ip 端口三者一致叫同源   （域名就是ip和端口）
        如果有一个不一样，就不同源（异源）

    怎么解决？
        1、jsonp
        2、cors头
        3、代理服务器

        1、当我们运行的项目的时候npm run serve，项目都会先进行打包，打包后再去运行

        2、我们的webpack在配置的时候装了一个插件，webpack-dev-server，它本质是一个服务器
        我们运行起来项目之后，在本地其实起了一个服务器，它会在浏览器发送请求的时候处理，返回我们
        打包的资源（dist）
        注意：没有webpackdevserver的时候dist是可以打包看到的，配置了以后
        dist打包后就会放在内存当中，我们看不到

        3、当打包完成后，我们输入localhost:8080，回车，其实是发了一个请求给本地服务器，本地服务器接收到请求后
        把dist当中的index.html返回给浏览器，浏览器会把内容进行渲染，我们就看到眼前的页面

        4、页面当中如果有发送ajax请求，那么此时，我们如果直接写的是目标服务器的地址，此时必然出现跨域
        因为我们目前站在本地的地址通过浏览器往另外一个真实服务器发请求，必然违背浏览器同源策略。所以浏览器往目标
        服务器去发送ajax请求，一般都会出现跨域。

        5、通过代理解决跨域其实就是一句话，把浏览器给目标服务器发送的请求转化为服务器往服务器发请求
        设置代理要明白下面步子：
          1、如果我们写代码的时候，发送请求直接写的目标地址，协议  ip  端口都有，那么就是给目标服务器发请求（跨域）
          2、如果我们在写代码的时候，发送请求目标地址没有写协议、ip和端口，只写了路径，默认是给本地发的，不会跨域
          前面两步做完之后，我们是把浏览器往目标服务器发的请求转化浏览器往本地服务器发的请求

          3、通过配置本地开发服务器的代理，解决跨域
              在安装webpack-dev-server的时候，这个服务器会自动安装一个中间件，http-proxy-middleware
              这个中间件就有转发请求的功能

              配置代理本质其实是在配置这个中间件，这个中间件不配，那么相当于没用，配置了，这个中间件就生效了（看门狗）

              请求已经从给目标服务器转化到了给本地服务器，我们只需要告诉看门狗，哪些是需要转发的
              那么我们后期只要是发给本地的请求，看门狗都去检查，如果检查到有需要转发的请求，就会转发请求

          Vue的配置代理写法

          devServer:{
          
          //看门狗
            proxy: {
              "/api": {
                // /api代表转发标识，本质是路径的开头
                // 这个标识有可能本身路径里就存在，也有可能是自己加的
                // 只要往本地发的请求，都要去检查路径是不是以转发标识开头，如果是就转发

                target: "http://localhost:3000",
                // 目标，代表要转发的目标服务器地址，没有路径，只有协议 IP 端口
                // 路径发往本地的请求当中已经有了

                pathRewrite: {"^/api" : ""}
                // 路径重写，要看最终目标服务器的路径当中有没有标识，如果本来就有这个标识
                // 那么就不需要重写，如果本身，没有是自己加的，那么要重写掉这个标识
              }
            }
          }