Js实现Fetch请求封装

在大型项目中，大量的请求和重复的代码，让请求封装成为一种必然。Js的fetch提供了一种现代、易用的接口，用于从服务器异步获取资源。然而，在实际项目中，我们通常需要对基础的fetch进行封装，以实现诸如添加默认配置、处理响应状态、自动解析响应数据、以及处理认证令牌等常见需求。

代码如下：

function fetch(url, setting) {
	let opts = { // 设置参数的初始值
		method: (setting.method || 'GET').toUpperCase(), // 请求方式
		headers: setting.headers || {}, // 请求头设置
		credentials: setting.credentials || true, // 设置cookie是否一起发送
		body: setting.body || {},
		mode: setting.mode || 'no-cors', // 可以设置 cors, no-cors, same-origin
		redirect: setting.redirect || 'follow', // follow, error, manual
		cache: setting.cache || 'default' // 设置 cache 模式 (default, reload, no-cache)
	}
	let dataType = setting.dataType || 'json' // 解析方式
	let data = setting.data || '' // 参数
	let paramsFormat = function(obj) { // 参数格式
		var str = ''
		for (var i in obj) {
			str += `${i}=${obj[i]}&`
		}
		return str.split('').slice(0, -1).join('')
	}
	if (opts.method === 'GET') {
		url = url + (data ? `?${paramsFormat(data)}` : '')
	} else {
		setting.body = data || {}
	}
	return new Promise((resolve, reject) => {
		fetch(url, opts).then(async res => {
			let data = dataType === 'text' ? await res.text() : dataType === 'blob' ? await res
				.blob() : await res.json()
			resolve(data)
		}).catch(e => {
			reject(e)
		})
	})
};

代码说明：

1、原生请求，fetch xhr一样的功能，只是fetch是Promise风格。

2、fetch第一个参数是url，第二个参数是配置项。

3、fetch可以配置：method请求方法，headers请求头，body请求体。

4、fetch请求如果发送get/dalete，参数放在-----路径参数（path/params），查询参数（?key=value&key=value）。

5、fetch接收的数据有两段，第一段描述信息，还没有返回结束，只是第一帧的http，能拿到status状态码，htaders返回头，决定使用何种方式处理返回体：res.json解析成对象，res.text解析成文本，res.blob解析成文件。

6、fetch第二段then，返回体解析后的结果。

链接: https://fly63.com/course/34_1639