一、ajax

傳統 Ajax 指的是 XMLHttpRequest（XHR），核心使用XMLHttpRequest對象，允許客戶端腳本發送HTTP請求，去請求服務器的數據來創建動態網頁，可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。也稱局部刷新（常見的例子：分頁、用戶名即時驗證、聊天）；多個請求之間如果有先后關系的話，就會出現回調地獄。

var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
   }
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

image.png

GET 還是 POST？
與 POST 相比，GET 更簡單也更快，并且在大部分情況下都能用。
然而，在以下情況中，請使用 POST 請求：

• 無法使用緩存文件（更新服務器上的文件或數據庫）
• 向服務器發送大量數據（POST 沒有數據量限制）
• 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

一個簡單 POST 請求：

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

如果需要像 HTML 表單那樣 POST 數據，請使用 setRequestHeader() 來添加 HTTP 頭。然后在 send() 方法中規定您希望發送的數據：

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

image.png

jquery封裝ajax

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  dataType: dataType,
  success: function () {},
  error: function () {}
});

Ajax是對原生XHR的封裝，為了達到我們跨越的目的，增添了對JSONP的支持。經過這么多年的更新維護，不得不承認它已經很成熟，能夠滿足我們的基本需求，但是隨著react,vue新一代框架的興起，以及ES規范的完善，更多API的更新，它逐漸暴露了自己的不足：

• 針對MVC的編程設計,不符合現在前端MVVM的趨勢
• 基于原生的XHR開發，XHR本身的架構不夠清晰
• JQuery較大，單純使用ajax卻要引入整個JQuery非常的不合理
• 配置和調用方式非常混亂，而且基于事件的異步模型不友好。

二、axios

Axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。

特性：

• 從瀏覽器中創建 XMLHttpRequests
• 從 node.js 創建 http 請求
• 支持 Promise API
• 攔截請求和響應
• 轉換請求數據和響應數據
• 取消請求
• 自動轉換 JSON 數據
• 客戶端支持防御 XSRF

PS:防止CSRF:就是讓你的每個請求都帶一個從cookie中拿到的key, 根據瀏覽器同源策略，假冒的網站是拿不到你cookie中得key的，這樣，后臺就可以輕松辨別出這個請求是否是用戶在假冒網站上的誤導輸入，從而采取正確的策略。

1. axios.create([config])

const Axios = axios.create({
  // baseURL: HOST, // 前綴
  responseType: 'json', // 數據格式
  withCredentials: true, // 是否允許帶cookie這些
  headers: {
    'Content-Type': 'application/json;charset=UTF-8' // json格式數據
  }
})

以下是可用的實例方法。指定的配置將與實例的配置合并。

• axios.request(config)
• axios.get(url[, config])
• axios.delete(url[, config])
• axios.head(url[, config])
• axios.options(url[, config])
• axios.post(url[, data[, config]])
• axios.put(url[, data[, config]])
• axios.patch(url[, data[, config]])

2. 請求配置
這些是創建請求時可以用的配置選項。只有 url 是必需的。如果沒有指定 method，請求將默認使用 get 方法。

{
   // `url` 是用于請求的服務器 URL
  url: '/user',

  // `method` 是創建請求時使用的方法
  method: 'get', // default

  // `baseURL` 將自動加在 `url` 前面，除非 `url` 是一個絕對 URL。
  // 它可以通過設置一個 `baseURL` 便于為 axios 實例的方法傳遞相對 URL
  baseURL: 'https://some-domain.com/api/',

  // `transformRequest` 允許在向服務器發送前，修改請求數據
  // 只能用在 'PUT', 'POST' 和 'PATCH' 這幾個請求方法
  // 后面數組中的函數必須返回一個字符串，或 ArrayBuffer，或 Stream
  transformRequest: [function (data, headers) {
    // 對 data 進行任意轉換處理
    return data;
  }],

  // `transformResponse` 在傳遞給 then/catch 前，允許修改響應數據
  transformResponse: [function (data) {
    // 對 data 進行任意轉換處理
    return data;
  }],

  // `headers` 是即將被發送的自定義請求頭
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` 是即將與請求一起發送的 URL 參數
  // 必須是一個無格式對象(plain object)或 URLSearchParams 對象
  params: {
    ID: 12345
  },

   // `paramsSerializer` 是一個負責 `params` 序列化的函數
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },

  // `data` 是作為請求主體被發送的數據
  // 只適用于這些請求方法 'PUT', 'POST', 和 'PATCH'
  // 在沒有設置 `transformRequest` 時，必須是以下類型之一：
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 瀏覽器專屬：FormData, File, Blob
  // - Node 專屬： Stream
  data: {
    firstName: 'Fred'
  },

  // `timeout` 指定請求超時的毫秒數(0 表示無超時時間)
  // 如果請求話費了超過 `timeout` 的時間，請求將被中斷
  timeout: 1000,

   // `withCredentials` 表示跨域請求時是否需要使用憑證
  withCredentials: false, // default

  // `adapter` 允許自定義處理請求，以使測試更輕松
  // 返回一個 promise 并應用一個有效的響應 (查閱 [response docs](#response-api)).
  adapter: function (config) {
    /* ... */
  },

 // `auth` 表示應該使用 HTTP 基礎驗證，并提供憑據
  // 這將設置一個 `Authorization` 頭，覆寫掉現有的任意使用 `headers` 設置的自定義 `Authorization`頭
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

   // `responseType` 表示服務器響應的數據類型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // default

  // `responseEncoding` indicates encoding to use for decoding responses
  // Note: Ignored for `responseType` of 'stream' or client-side requests
  responseEncoding: 'utf8', // default

   // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名稱
  xsrfCookieName: 'XSRF-TOKEN', // default

  // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
  xsrfHeaderName: 'X-XSRF-TOKEN', // default

   // `onUploadProgress` 允許為上傳處理進度事件
  onUploadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },

  // `onDownloadProgress` 允許為下載處理進度事件
  onDownloadProgress: function (progressEvent) {
    // 對原生進度事件的處理
  },

   // `maxContentLength` 定義允許的響應內容的最大尺寸
  maxContentLength: 2000,

  // `validateStatus` 定義對于給定的HTTP 響應狀態碼是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者設置為 `null` 或 `undefined`)，promise 將被 resolve; 否則，promise 將被 rejecte
  validateStatus: function (status) {
    return status >= 200 && status < 300; // default
  },

  // `maxRedirects` 定義在 node.js 中 follow 的最大重定向數目
  // 如果設置為0，將不會 follow 任何重定向
  maxRedirects: 5, // default

  // `socketPath` defines a UNIX Socket to be used in node.js.
  // e.g. '/var/run/docker.sock' to send requests to the docker daemon.
  // Only either `socketPath` or `proxy` can be specified.
  // If both are specified, `socketPath` is used.
  socketPath: null, // default

  // `httpAgent` 和 `httpsAgent` 分別在 node.js 中用于定義在執行 http 和 https 時使用的自定義代理。允許像這樣配置選項：
  // `keepAlive` 默認沒有啟用
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

  // 'proxy' 定義代理服務器的主機名稱和端口
  // `auth` 表示 HTTP 基礎驗證應當用于連接代理，并提供憑據
  // 這將會設置一個 `Proxy-Authorization` 頭，覆寫掉已有的通過使用 `header` 設置的自定義 `Proxy-Authorization` 頭。
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },

  // `cancelToken` 指定用于取消請求的 cancel token
  // （查看后面的 Cancellation 這節了解更多）
  cancelToken: new CancelToken(function (cancel) {
  })
}

3. 相應結構
請求的響應包含以下信息

{
  // `data` 由服務器提供的響應
  data: {},

  // `status` 來自服務器響應的 HTTP 狀態碼
  status: 200,

  // `statusText` 來自服務器響應的 HTTP 狀態信息
  statusText: 'OK',

  // `headers` 服務器響應的頭
  headers: {},

   // `config` 是為請求提供的配置信息
  config: {},
 // 'request'
  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance the browser
  request: {}
}

4. 配置的優先順序
配置會以一個優先順序進行合并。這個順序是：在 lib/defaults.js 找到的庫的默認值，然后是實例的 defaults 屬性，最后是請求的 config 參數。后者將優先于前者。

5. 攔截器
在請求或響應被 then 或 catch 處理前攔截它們。

// 添加請求攔截器
axios.interceptors.request.use(function (config) {
    // 在發送請求之前做些什么
    return config;
  }, function (error) {
    // 對請求錯誤做些什么
    return Promise.reject(error);
  });

// 添加響應攔截器
axios.interceptors.response.use(function (response) {
    // 對響應數據做點什么
    return response;
  }, function (error) {
    // 對響應錯誤做點什么
    return Promise.reject(error);
  });

如果你想在稍后移除攔截器，可以這樣：

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

可以為自定義 axios 實例添加攔截器

const instance = axios.create({/*...*/});
instance.interceptors.request.use(function () {/*...*/});

三、fetch

fetch號稱是AJAX的替代品，是在ES6出現的，使用了ES6中的promise對象。Fetch是基于promise設計的。Fetch的代碼結構比起ajax簡單多了，參數有點像jQuery ajax。但是，一定記住fetch不是ajax的進一步封裝，而是原生js，沒有使用XMLHttpRequest對象。
fetch的優點：
1.符合關注分離，沒有將輸入、輸出和用事件來跟蹤的狀態混雜在一個對象里
2.更好更方便的寫法

坦白說，上面的理由對我來說完全沒有什么說服力，因為不管是Jquery還是Axios都已經幫我們把xhr封裝的足夠好，使用起來也足夠方便，為什么我們還要花費大力氣去學習fetch？
我認為fetch的優勢主要優勢就是：

1. 語法簡潔，更加語義化
2. 基于標準 Promise 實現，支持 async/await
3. 同構方便，使用 isomorphic-fetch
4. 更加底層，提供的API豐富（request, response）
5. 脫離了XHR，是ES規范里新的實現方式

最近在使用fetch的時候，也遇到了不少的問題：
fetch是一個低層次的API，你可以把它考慮成原生的XHR，所以使用起來并不是那么舒服，需要進行封裝。
1）fetch只對網絡請求報錯，對400，500都當做成功的請求，服務器返回 400，500 錯誤碼時并不會 reject，只有網絡錯誤這些導致請求不能完成時，fetch 才會被 reject。
2）fetch默認不會帶cookie，需要添加配置項： fetch(url, {credentials: 'include'})
3）fetch不支持abort，不支持超時控制，使用setTimeout及Promise.reject的實現的超時控制并不能阻止請求過程繼續在后臺運行，造成了流量的浪費
4）fetch沒有辦法原生監測請求的進度，而XHR可以

下面來看一下知識點
語法：Promise<Response> fetch(input[, init]);
參數：

1. input：定義要獲取的資源。這可能是：一個 USVString字符串，包含要獲取資源的 URL。一些瀏覽器會接受 blob: 和 data: 作為 schemes.一個 Request 對象。
2. init(可選)：一個配置項對象，包括所有對請求的設置。可選的參數有：

• method: 請求使用的方法，如 GET、POST。
• headers: 請求的頭信息，形式為 Headers 的對象或包含 ByteString值的對象字面量。
• body: 請求的 body 信息：可能是一個 Blob、BufferSource、FormData、URLSearchParams 或者 USVString對象。注意 GET 或 HEAD 方法的請求不能包含 body 信息。
• mode: 請求的模式，如 cors、 no-cors 或者 same-origin。
• credentials: 請求的 credentials，如 omit、same-origin 或者 include。為了在當前域名內自動發送 cookie ， 必須提供這個選項， 從 Chrome 50 開始， 這個屬性也可以接受FederatedCredential實例或是一個PasswordCredential`實例。
• cache: 請求的 cache 模式: default、 no-store 、 reload 、 no-cache 、 force-cache或者 only-if-cached 。
• redirect: 可用的 redirect 模式: follow (自動重定向), error (如果產生重定向將自動終止并且拋出一個錯誤), 或者 manual (手動處理重定向). 在Chrome中，Chrome 47之前的默認值是 follow，從 Chrome 47開始是 manual。
• referrer: 一個 USVString可以是 no-referrer、client或一個 URL。默認是 client。
• referrerPolicy: 指定了HTTP頭部referer字段的值。可能為以下值之一： no-referrer、 no-referrer-when-downgrade、 origin、 origin-when-cross-origin、 unsafe-url 。
• integrity: 包括請求的 subresource integrity。`

請注意，fetch 規范與 jQuery.ajax() 主要有三種方式的不同：

• 當接收到一個代表錯誤的 HTTP 狀態碼時，從 fetch() 返回的 Promise 不會被標記為 reject， 即使響應的 HTTP 狀態碼是 404 或 500。相反，它會將 Promise 狀態標記為 resolve （但是會將 resolve 的返回值的 ok 屬性設置為 false ），僅當網絡故障時或請求被阻止時，才會標記為 reject。
• fetch() 不會接受跨域 cookies；你也不能使用 fetch() 建立起跨域會話。其他網站的 Set-Cookie 頭部字段將會被無視。
• fetch 不會發送 cookies。除非你使用了credentials 的初始化選項。（自 2017 年 8 月 25 日以后，默認的 credentials 政策變更為 same-origin。Firefox 也在 61.0b13 版本中進行了修改）

一個基本的 fetch 請求設置起來很簡單。看看下面的代碼：

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

發送帶憑據的請求
為了讓瀏覽器發送包含憑據的請求（即使是跨域源），要將credentials: 'include'添加到傳遞給 fetch()方法的init對象。

fetch('https://example.com', {
  credentials: 'include'  
})

如果你只想在請求URL與調用腳本位于同一起源處時發送憑據，請添加 credentials: 'same-origin'。
要改為確保瀏覽器不在請求中包含憑據，請使用 credentials: 'omit'。

上傳 JSON 數據
使用 fetch() POST JSON數據

var url = 'https://example.com/profile';
var data = {username: 'example'};

fetch(url, {
  method: 'POST', // or 'PUT'
  body: JSON.stringify(data), // data can be `string` or {object}!
  headers: new Headers({
    'Content-Type': 'application/json'
  })
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));

上傳文件

var formData = new FormData();
var fileField = document.querySelector("input[type='file']");

formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]);

fetch('https://example.com/profile/avatar', {
  method: 'PUT',
  body: formData
})
.then(response => response.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));

檢測請求是否成功
如果遇到網絡故障，fetch() 對象。雖然這個情況經常是遇到了權限問題或類似問題——比如 404 不是一個網絡故障。想要精確的判斷 fetch() 是否成功，需要包含 promise resolved 的情況，此時再判斷 Response.ok是不是為 true。類似以下代碼：

fetch('flowers.jpg').then(function(response) {
  if(response.ok) {
    return response.blob();
  }
  throw new Error('Network response was not ok.');
}).then(function(myBlob) { 
  var objectURL = URL.createObjectURL(myBlob); 
  myImage.src = objectURL; 
}).catch(function(error) {
  console.log('There has been a problem with your fetch operation: ', error.message);
});

Headers
使用 Headers 的接口，你可以通過 Headers()構造函數來創建一個你自己的 headers 對象。一個 headers 對象是一個簡單的多名值對：

var content = "Hello World";
var myHeaders = new Headers();
myHeaders.append("Content-Type", "text/plain");
myHeaders.append("Content-Length", content.length.toString());
myHeaders.append("X-Custom-Header", "ProcessThisImmediately");

也可以傳一個多維數組或者對象字面量：

myHeaders = new Headers({
  "Content-Type": "text/plain",
  "Content-Length": content.length.toString(),
  "X-Custom-Header": "ProcessThisImmediately",
});

Response 對象
Response實例是在 fetch() 處理完 promise 之后返回的。
你會用到的最常見的 response 屬性有:

• Response.status — 整數（默認值為200）為response的狀態碼。
• Response.statusText — 字符串（默認值為"OK"），該值與 HTTP 狀態碼消息對應。
• Response.ok — 如上所示，該屬性是來檢查response的狀態是否在 200 - 299（包括200 和 299）這個范圍內。該屬性返回一個布爾值。