ajax 跨域 promise

先后端不分离

前端写好 html + css 结构，而后把 html 交给后端，而后利用服务端技术从服务器的数据库中把数据查出来，而后绑定到页面中，而后把绑定好数据的页面直接返回给浏览器，就是说浏览器拿的就是绑定好数据的页面 html（服务端渲染 SSR(Server-Side-Rendering)）

先后端分离

发送一个 ajax 请求，等到请求结束后把数据经过前端手段把数据绑定到页面中（动态建立 dom + appendChild 或者字符串拼接 + innerHTML）。这种用 ajax 渲染数据的方式是局部刷新的。

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.baidu.com/', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log('xxx')
  }
};
xhr.send();
复制代码

跨域

同源策略 为了保证浏览器的信息安全，浏览器采用同源策略，保证当前源中的资源只能在当前的源中使用；其余源若是须要使用当前源资源，须要特殊技术，这种A源访问B源的资源的通讯称为跨域；

报错：Access to XMLHttpRequest at 'https://www.baidu.com/' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
  
  //说明跨域了
复制代码

同源策略要求通讯的两个源的协议、域名、端口号要相同，若是三者中任意一个不一样就是不知足同源策略；不知足同源策略的通讯就是跨域；

跨域解决方案

1. JSONP
2. 服务端转发，由于同源策略只在客户端存在，在服务端是不存在的；因此能够由服务端转发请求；
3. nginx 转发，nginx 是服务器应用程序，它能够接受客户端的请求，而后根据规则能够配置自动转发；
4. CORS: Cross-Origin-Resource-Sharing: 须要目标域设置 Access-Control-Allow-Origin 头信息； 原理 利用script 的src属性不受同源策略约束 能够访问服务器或端口号下的数据 -提早声明一个叫作 fn 的函数，给 fn 设置一个形参；
   • 在页面给 script 的 src 的指向的路径拼接一个 callback 属性，callback=fn；当浏览器解析到这个 script 标签时，会向 src 指向的路径发起 http 请求；
   • 服务器收到这个请求后，会返回一个 fn (这里面是服务器返回的数据)
   • fn({xxx}) 这个是让 fn 执行，小括号里面就是服务器发送给咱们的数据

Promise 浏览器新增内置类 用来管理异步 自己是同步

let p = new Promise(function (resolve, reject) {
  // 这个函数中处理异步
});

复制代码

Promise 的状态一旦发生变动，就会凝固，不会在发生变化；

三种状态

- pending: 已经初始化，正在处理异步
 - fulfilled: 异步处理成功
 - rejected: 异步处理失败
复制代码

ajax 封装

ajax({
  url: 'aside.json?a=b',
  type: 'POST',
  data: {
    user: 111,
    pwd: 1234546
  },
  cache: false,
  async: false,
  error(err) {
    console.log(err);
  },
  success (data) {
    console.log(data)
  }
});
复制代码

• 根据请求方式处理传递给服务器的参数；若是是 get - 请求参数拼接到 url 末尾，若是是 post 请求直接放到请求体中；
• 根据是否须要缓存，判断是否给 get 请求拼接时间戳；
• 发送 ajax；
• 当成功后执行成功的回调，而且传入返回数据； 若是失败处理失败的回调，传入失败的信息；