JavaScript 网络请求的几种方式

[ChuChencheng]

XMLHttpRequest

XMLHttpRequest（XHR）对象可以与服务器交互，可以从 URL 获取数据，而无需刷新整个页面。

基本用法

function sendAjax() {
  //构造表单数据
  var formData = new FormData();
  formData.append('username', 'johndoe');
  formData.append('id', 123456);
  //创建xhr对象 
  var xhr = new XMLHttpRequest();
  //设置xhr请求的超时时间
  xhr.timeout = 3000;
  //设置响应返回的数据格式
  xhr.responseType = "text";
  //创建一个 post 请求，采用异步
  xhr.open('POST', '/server', true);
  //注册相关事件回调处理函数
  xhr.onload = function(e) { 
    if(this.status == 200||this.status == 304){
        alert(this.responseText);
    }
  };
  xhr.ontimeout = function(e) { ... };
  xhr.onerror = function(e) { ... };
  xhr.upload.onprogress = function(e) { ... };

  //发送数据
  xhr.send(formData);
}

readyState

XMLHttpRequest.UNSENT === 0 // 代理被创建，但尚未调用 open() 方法。
XMLHttpRequest.OPENED=== 1 // open() 方法已经被调用。
XMLHttpRequest.HEADERS_RECEIVED=== 2 // send() 方法已经被调用，并且头部和状态已经可获得。
XMLHttpRequest.LOADING === 3 // 下载中； responseText 属性已经包含部分数据。
XMLHttpRequest.DONE === 4 // 下载操作已完成。

取消请求

xhr.abort()

Fetch

Fetch 提供了对 Request 和 Response 对象的通用定义，使之可以被应用到更多场景中，例如 Service Worker、Cache API 等。

基本用法

// Example POST method implementation:

postData('http://example.com/answer', {answer: 42})
  .then(data => console.log(data)) // JSON from `response.json()` call
  .catch(error => console.error(error))

function postData(url, data) {
  // Default options are marked with *
  return fetch(url, {
    body: JSON.stringify(data), // must match 'Content-Type' header
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, same-origin, *omit
    headers: {
      'user-agent': 'Mozilla/4.0 MDN Example',
      'content-type': 'application/json'
    },
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, cors, *same-origin
    redirect: 'follow', // manual, *follow, error
    referrer: 'no-referrer', // *client, no-referrer
  })
  .then(response => response.json()) // parses response to JSON
}

fetch 返回一个 Promise ，并 resolve 一个 Response 对象，只有在网络故障或主动中断请求时会 reject 。

fetch 与 jQuery.ajax() 的不同

• fetch 接收到代表错误的 HTTP 状态码时，不会 reject ，即使收到 404 或 500 状态码，也会 resolve （resolve 返回值的 ok 属性会为 false），只有在网络故障或主动中断请求时会 reject 。
• fetch() 不接受跨域 cookie ，不能用 fetch() 建立跨域会话，其他网站的 Set-Cookie 头部字段会被忽略。
• fetch 不会发送 cookie ，除非使用了 credentials 。

取消请求

通过 AbortSignal API 来中断 fetch 发起的请求。

var controller = new AbortController();
var signal = controller.signal;

var downloadBtn = document.querySelector('.download');
var abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', fetchVideo);

abortBtn.addEventListener('click', function() {
  controller.abort();
  console.log('Download aborted');
});

function fetchVideo() {
  ...
  fetch(url, {signal}).then(function(response) {
    ...
  }).catch(function(e) {
    reports.textContent = 'Download error: ' + e.message;
  })
}

Axios

axios 是一个开源的 http 库，基于 Promise ，可用于浏览器与 Node.js 端。

基本用法

// Send a POST request
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
}).then((response) => {});

取消请求

使用 CancelToken.source ：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');

使用 CancelToken 构造函数：

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // An executor function receives a cancel function as a parameter
    cancel = c;
  })
});

// cancel the request
cancel();

jQuery.ajax()

基本用法

$.ajax({
  url: '/url',
  type: 'POST',
  data: {
    form: 'data',
  },
  dataType: 'json',
}).done((response) => {
}).fail(() => {
}).always(() => {})

返回一个 jqXHR 对象

取消请求

const jqXHR = $.ajax({
  // settintgs...
})

jqXHR.abort()

参考

• XMLHttpRequest
• XMLHttpRequest.readyState
• 使用 XMLHttpRequest
• 你真的会使用XMLHttpRequest吗？
• Fetch API
• 使用 Fetch
• AbortSignal
• axios
• jQuery.ajax()