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. };
  37. 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.     }