Fetch是浏览器原生提供的对象。用于在 JavaScript 脚本里面发出 HTTP 请求。

XMLHttpRequest 对象因为写起来麻烦,在实际开发中,往往使用它的各种封装库,比如早期的 jQuery。早期的封装库都使用回调函数,很不直观。后来的封装库都改用 Promise 的写法,比如 axios。但是引入jquery、axios等需要加载外部库,而http请求又是一个经常用到的基本需求。所以,内置在浏览器里面的Fetch API就应运而生了。

http://www.ruanyifeng.com/blog/2020/12/fetch-tutorial.html

封装fetch

  1. /**
  2. * 封装fetch函数,用Promise做回调
  3. * @type {{get: (function(*=)), post: (function(*=, *=))}}
  4. */
  5. const fetchUtil = {
  6. get: (url) => {
  7. return new Promise((resolve, reject) => {
  8. fetch(url, {
  9. method: 'GET',
  10. headers: {
  11. 'Content-Type': 'application/x-www-form-urlencoded',
  12. }
  13. }).then((response) => response.json()).then(response => {
  14. resolve(response);
  15. }).catch(err => {
  16. reject(new Error(err));
  17. });
  18. });
  19. },
  20. post: (url, params) => {
  21. return new Promise((resolve, reject) => {
  22. fetch(url, {
  23. method: 'POST',
  24. headers: {
  25. 'Content-Type': 'application/x-www-form-urlencoded',
  26. },
  27. body: params
  28. }).then((response) => response.json()).then(response => {
  29. resolve(response);
  30. }).catch(err => {
  31. reject(new Error(err));
  32. });
  33. });
  34. }
  35. };
  36. export default fetchUtil;

使用

  1. import Fetch from "../util/FetchUtil.js";
  2. // post请求
  3. post(){
  4. let params = "";
  5. params += "phone=" + "xxxxxx" + "&password="+"123456";
  6. Fetch.post("https://carvedu.com/api/user/sms", this.params)
  7. .then(res => {
  8. console.log(res);
  9. })
  10. .catch(err => {
  11. console.log(err);
  12. });
  13. }
  14. // get请求
  15. get() {
  16. Fetch.get("https://carvedu.com/api/courses")
  17. .then(res => {
  18. console.log(res);
  19. })
  20. .catch(err => {
  21. console.log(err);
  22. });
  23. }