fetch基本使用方法

GET

//object类型参数转为地址栏参数
function formatParams(url, data) {
    return `${url}?${Object.keys(data)
        .map((e) => {
            if (data[e] !== "" && data[e] !== null && data[e] !== undefined) {
                return `${e}=${data[e]}`;
            } else {
                return null;
            }
        })
        .filter((e) => {
            return e;
        })
        .join("&")}`;
}

const data = { username: 'example' };
const url = formatParams('https://example.com/profile',data)

fetch(url, {
  method: 'GET',
  //body: JSON.stringify(data), //get请求不能传body
})
.then(response => response.json())
.then(data => {
  console.log('Success:', data);
})
.catch((error) => {
  console.error('Error:', error);
});

POST

JSON

const data = { username: 'example' };

fetch('https://example.com/profile', {
  method: 'POST', // or 'PUT'
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => {
  console.log('Success:', data);
})
.catch((error) => {
  console.error('Error:', error);
});

FormDate

//单个文件
const formData = new FormData();
const 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(result => {
  console.log('Success:', result);
})
.catch(error => {
  console.error('Error:', error);
});


//多个文件
const formData = new FormData();
const photos = document.querySelector('input[type="file"][multiple]');

formData.append('title', 'My Vegas Vacation');
for (let i = 0; i < photos.files.length; i++) {
  formData.append(`photos_${i}`, photos.files[i]);
}

fetch('https://example.com/posts', {
  method: 'POST',
  body: formData,
})
.then(response => response.json())
.then(result => {
  console.log('Success:', result);
})
.catch(error => {
  console.error('Error:', error);
});