ajax（下）和「承諾」

 

ajax跨域

 

因爲瀏覽器的同源策略，禁止ajax從一個域名請求另一個域名上的數據。

瀏覽器的同源策略，是對JavaScript實施的安全限制。

 

所謂的同源是指，域名、協議、端口均爲相同。

 

http://image.baidu.com:80/search/detail?ct=503316480&z=undefined#header

URL構成：

http ---- 超文本傳輸協議

image.baidu.com ---- 域名

80 ---- 端口

/search/detail ---- 資源目錄

ct=503316480&z=undefined ---- 發送到服務器的數據的查詢字段

#header ---- 錨點

 

判斷以下請求是否爲跨域：

http://local.com/index.html   請求  http://native.com/index.php --跨域

https://www.abc.com/index.html  請求  http://www.abc.com/index.php --跨域

http://www.abc.com:8888/index.html  請求  http://www.abc.com:8889/index.php --跨域

http://www.abc.com/item/index.html  請求  http://www.abc.com/index.php --同源，非跨域

localhost  請求  127.0.0.1 --跨域

 

幾種主流的跨域解決方案：

 

第一種：經過服務端語言代理請求。如PHP，服務端語言php是沒有跨域限制的。

- 讓服務器去別的網站獲取內容而後返回頁面。

 

第二種：jsonp跨域

- jsonp跨域就是利用script標籤的跨域能力請求資源

- 既然叫jsonp，顯然目的仍是json，並且是跨域獲取

- 利用js建立一個script標籤，把json的url賦給script的scr屬性，把這個script插入到頁面裏，讓瀏覽器去跨域獲取資源

- callback是頁面存在的回調方法，參數就是想獲得的json

- 回調方法要聽從服務端的約定通常是用 callback 或者 cb

- 注意：jsonp只針對get請求

 

第三種：CORS 跨域資源共享

- CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）

- 它容許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制

- 整個CORS通訊過程，都是瀏覽器自動完成，不須要用戶參與

- 對於開發者來講，CORS通訊與同源的AJAX通訊沒有差異，代碼徹底同樣

- 實現CORS通訊的關鍵是服務器，只要服務器實現了CORS接口，就能夠跨源通訊

 

實現CORS並不難，只需服務端作一些設置便可：如

<?php

header("Access-Control-Allow-Origin:*"); // 容許任何來源

注意：IE10如下不支持CORS

 

第四種：nginx代理跨域

 

Promise - 「承諾」

 

Promise 是ES6對異步編程的一種解決方案，比傳統的解決方案（回調函數和事件）更合理更強大。

Promise，簡單說就是一個容器，裏面保存着一個還沒有完成且預計在將來完成的異步操做。

Promise是一個構造函數，用來建立一個Promise對象。

 

Promise對象表明一個異步操做，有三種狀態：

pending（進行中）

fulfilled（已成功）

rejected（已失敗）

 

Promise對象的狀態改變，只有兩種可能：

從 pending 變爲 fulfilled

從 pending 變爲 rejected

 

一旦狀態改變，就不會再變，任什麼時候候均可以獲得這個結果。

有了Promise對象，就能夠將異步操做以同步操做的流程表達出來，避免了層層嵌套的回調函數。

 

var p = new Promise(function(resolve, reject) {

  // do something ...

  if (/* 異步操做成功 */){

    resolve(value);

  } else {

    reject(error);

  }

});

Promise構造函數接受一個函數做爲參數，該函數的兩個參數分別是resolve和reject。

resolve 和 reject 是兩個函數，由 JavaScript 引擎提供，不用本身部署。

 

resolve 函數的做用是，將Promise對象的狀態從「進行中」變爲「成功」（即從 pending 變爲 resolved），在異步操做成功時調用，並將異步操做的結果，做爲參數傳遞出去。

reject 函數的做用是，將Promise對象的狀態從「進行中」變爲「失敗」（即從 pending 變爲 rejected），在異步操做失敗時調用，並將異步操做報出的錯誤，做爲參數傳遞出去。

 

p.then(function(value) {

  // success

}, function(error) {

  // failure  可選

});

 

Promise實例的then方法：

第一個參數是resolved狀態的回調函數

第二個參數（可選）是rejected狀態的回調函數

方法返回的是一個新的Promise實例

 

Promise實例的catch方法：用於指定發生錯誤時的回調函數。

 

Promise.all能夠將多個Promise實例包裝成一個新的Promise實例。

1.它接受一個數組做爲參數。

2.數組能夠是Promise對象，也能夠是其它值，只有Promise會等待狀態改變。

3.當全部的子Promise都完成，該Promise完成，返回值是所有值的數組。

4.若是有任何一個失敗，該Promise失敗，返回值是第一個失敗的子Promise的結果。

Promise.all([p1,p2,p3])

 

1.Promise 改造 函數嵌套

 

2.Promise 改造 ajax嵌套依賴

 

 

瞭解 fetch 與  axios

 

fetch：號稱是AJAX的替代品，是基於promise設計的。

fetch不是ajax的進一步封裝，而是原生js，代碼結構比起ajax簡單多了。

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

 

axios：是一個基於 promise 的 HTTP 庫，能夠用在瀏覽器和 node.js 中。

vue官方推薦的HTTP請求庫。

https://www.kancloud.cn/yunye/axios/234845