Fetch的使用

最新推荐文章于 2025-06-10 09:20:59 发布

O_升_o

最新推荐文章于 2025-06-10 09:20:59 发布

阅读量321

点赞数

分类专栏： JavaScript 文章标签： fetch

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何使用原生JS（fetch和XMLHttpRequest）进行API请求，包括GET、POST及文件上传，并提供了fetch的封装方法，简化API调用流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.简介：
原生JS（fetch和XMLHttpRequest）请求API的一种方式，可以调用.then的方法，可以看成一个promise函数！
二.具体使用：
1.GET请求

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

1.POST请求：

  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())
	.then(response => console.log('Success:', response))
	.catch(error => console.error('Error:', error));

3.上传文件：

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())
	.then(response => console.log('Success:', response))
	.catch(error => console.error('Error:', error));

三.封装fetch:

/**
	 * 将对象转成 a=1&b=2的形式
	 * @param obj 对象
	 */
	function obj2String(obj, arr = [], idx = 0) {
	  for (let item in obj) {
	    arr[idx++] = [item, obj[item]]
	  }
	  return new URLSearchParams(arr).toString()
	}
	/**
	 * 真正的请求
	 * @param url 请求地址
	 * @param options 请求参数
	 * @param method 请求方式
	 */
	function commonFetcdh(url, options, method = 'GET') {
	  const searchStr = obj2String(options)
	  let initObj = {}
	  if (method === 'GET') { // 如果是GET请求，拼接url
	    url += '?' + searchStr
	    initObj = {
	      method: method,
	      credentials: 'include'
	    }
	  } else {
	    initObj = {
	      method: method,
	      credentials: 'include',
	      headers: new Headers({
	        'Accept': 'application/json',
	        'Content-Type': 'application/x-www-form-urlencoded'
	      }),
	      body: searchStr
	    }
	  }
	  fetch(url, initObj).then((res) => {
	    return res.json()
	  }).then((res) => {
	    return res
	  })
	}
	
	/**
	 * GET请求
	 * @param url 请求地址
	 * @param options 请求参数
	 */
	function GET(url, options) {
	  return commonFetcdh(url, options, 'GET')
	}
	
	/**
	 * POST请求
	 * @param url 请求地址
	 * @param options 请求参数
	 */
	function POST(url, options) {
	  return commonFetcdh(url, options, 'POST')
	}
	调用实例：
	GET('https://www.baidu.com/search/error.html', {a:1,b:2})
	POST('https://www.baidu.com/search/error.html', {a:1,b:2})

四.参考内容：
俱沫：《fetch，终于认识你》https://segmentfault.com/a/1190000011433064；
mdn:《使用fetch》https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch;