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；
• 當成功後執行成功的回調，而且傳入返回數據； 若是失敗處理失敗的回調，傳入失敗的信息；