大涛子客栈

关于 http 请求的几种方式

AJAX

具体来说，AJAX 包括以下几个步骤：

  • 创建 XMLHttpRequest 实例
  • 发出 HTTP 请求
  • 接收服务器传回的数据
  • 更新网页数据

起步

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const MYTHOD = "GET";
const URL =
  "https://api.github.com/search/repositories?q=javascript&sort=stars";
let xhr = null;

//处理低版本IE不兼容问题
if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
} else {
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

// 指定回调函数，监听通信状态（readyState属性）的变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

// 捕获错误
xhr.onerror = err => console.error("Error: ", xhr.statusText);

// 发出 HTTP 请求
xhr.open(MYTHOD, URL, true);

xhr.send(null);

设置头信息

该方法必须在 open()之后、send()之前调用。如果该方法多次调用，设定同一个字段，则每一次调用的值会被合并成一个单一的值发送。

1
2
3
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Content-Length", JSON.stringify(data).length);
xhr.send(JSON.stringify(data));

Ajax+Promise

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
let ajax = ({ method = "GET", path, body, headers }) => {
  //进行Promise封装
  return new Promise((resolve, reject) => {
    let request = new XMLHttpRequest();

    request.open(method, path, true); //配置

    if (method == "GET") {
      request.send(null);
    } else {
      for (const key in headers) {
        //遍历header,设置响应头
        let value = headers[key];
        request.setRequestHeader(key, value);
      }
      request.send(body);
    }

    request.onreadystatechange = () => {
      if (request.readyState === 4) {
        if (request.status >= 200 && request.status < 400) {
          resolve.call(undefined, request.responseText);
        } else if (request.status >= 400) {
          reject.call(undefined, request);
        }
      }
    };
  });
};

//使用ajax
ajax({
  method: "get",
  path: "https://api.github.com/search/repositories?q=javascript&sort=stars",
  headers: {
    "content-type": "application/json"
  }
}).then(
  responseText => {
    console.log(responseText);
  },
  request => {
    console.log(request);
  }
);

jQuery 使用

get 方法，返回一个 deferred 对象：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const URL =
  "https://api.github.com/search/repositories?q=javascript&sort=stars";
let request = $.get(URL);
request
  .done(function(data) {
    console.log(data);
  })
  .fail(function(err) {
    console.log(err);
  });

// 或者
let request = $.ajax({
  url: URL,
  type: "GET"
});
request.done(data => console.log(data)).fail(err => console.log(err));

使用 promise：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function getData() {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: "https://api.github.com/search/repositories?q=javascript&sort=stars",
      type: "GET",
      success: function(data) {
        resolve(data);
      },
      error: function(err) {
        resolve(err);
      }
    });
  });
}

getData()
  .then(function(data) {
    console.log(data);
  })
  .catch(function(err) {
    console.log(err);
  });

Fetch 函数

Fetch 提供了 Request 和 Response 对象（以及与网络请求有关的其他内容）的一般定义。

Fetch API 提供了 fetch() 方法，它被定义在 BOM 的 window 对象中，你可以用它来发起对远程资源的请求。

fetch() 方法返回的是一个 Promise 对象，让你能够对请求的返回结果进行检索。

fetch 的配置：

  • Promise fetch(String url [, Object options]);
  • Promise fetch(Request req [, Object options]);
1
2
3
4
5
6
7
8
9
10
11
const URL = 'https://api.github.com/search/repositories?q=javascript&sort=stars';
let req = new Request(URL, { method: "GET", cache: "reload" });
fetch(req)
  .then(function(response) {
    return response.json();
  })
  .then(function(json) {
    console.log(json);
  }).catch(function(err) {
    console.log(err);
  }

fetch 和 ajax 的主要区别：

  • fetch()返回的 promise 将不会拒绝 http 的错误状态，即使响应是一个 HTTP 404 或者 500
  • 在默认情况下 fetch 不会接受或者发送 cookies

Axios

基本使用：

1
2
3
4
5
6
const URL =
  "https://api.github.com/search/repositories?q=javascript&sort=stars";
axios
  .get(URL)
  .then(response => console.log(response))
  .catch(err => console.log(err));

或者使用 async/await：

1
2
3
4
5
6
7
8
async function getData() {
  try {
    return await axios.get(URL);
  } catch (error) {
    console.error(error);
  }
}
getData().then(data => console.log(data));

资料

 上一页

zepto

 评论