fetch 是啥?
fetch 函数是 JavaScript 中用于发送网络请求的内置 API,可以替代传统的 XMLHttpRequest。它可以发送 HTTP 请求(如 GET、POST 等),并返回一个 Promise,从而简化异步操作
基本用法
/*
下面是 fetch 的基本语法
url:请求的 URL(必需)
options:一个包含请求配置的对象(可选),如请求方法、请求头、请求体等。
*/
fetch(url, options)
.then(response => {
// 处理响应
})
.catch(error => {
// 处理错误
});
常见选项
参数 options
是一个对象,可以包含以下常见属性:
method
:请求方法,例如 GET、POST、PUT、DELETE 等。默认是 GET。headers
:包含请求头的对象,通常用于设置 Content-Type 或授权信息。body
:请求体,用于传递数据(POST、PUT 请求时)。mode
:请求模式,如 cors、no-cors 和 same-origin。credentials
:指示是否发送 cookies,值为 omit(默认不发送)、same-origin(同源发送)或 include(跨域发送)。
GET 示例
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json(); // 将响应解析为 JSON
})
.then(data => console.log(data))
.catch(error => console.error('Fetch error:', error));
POST 示例
fetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ name: 'John', age: 30 })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Fetch error:', error));
上传文件
const formData = new FormData();
formData.append('file', fileInput.files[0]); // 假设 fileInput 是一个文件输入
fetch('https://api.example.com/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Fetch error:', error));
封装实例
我们可以将常用的数据交互封装为一个函数,方便调用
/**
* 处理 Fetch,如果返回值不符合规范,则报错(可通过 .catch 获取)
* @param {*} response
* @returns
*/
const handleResponse = response=> response.json().then(json=>{
if(response.ok && json.success===true)
return json
else
return Promise.reject(json)
})
/**
* 通用 FETCH 交互函数(POST)
* @param {String} url - 后端地址
* @param {Object} data - 表单数据
* @param {Boolean} useJSON - 是否使用 JSON 格式提交
* @param {Object} headers - 额外的请求头
* @param {Function} handler - 处理函数,默认转换为 JSON 对象
*/
window.ajax = (url, data, useJSON=true, headers={}, handler=handleResponse)=>{
let body = undefined
if(useJSON){
headers['Content-Type'] = 'application/json'
body = JSON.stringify(data)
}else{
if(data){
body = new FormData()
Object.keys(data).forEach(k=> body.append(k, data[k]))
}
}
return fetch(url, {method:"POST", headers, body}).then(handler)
}
使用示例
ajax("/api", {name:"集成显卡"}).then(d=>console.debug(d))