fetch基本方法的调用 - web建站教程手机端

fetch基本方法怎么使用，下面web建站小编给大家详细介绍一下！

fetch方法的设置

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: 'admin' };
const url = formatParams('https://ipkd.cn/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/put调用

const data = { username: 'admin' };

fetch('https://ipkd.cn/profile', {
  method: 'POST',
  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', 'admin');
formData.append('avatar', fileField.files[0]);

fetch('https://ipkd.cn/profile/avatar', {
  method: 'PUT',
  body: formData
})
.then(response => response.json())
.then(result => {
  console.log('success:', result);
})
.catch(error => {
  console.error('error:', error);
});

git中fetch和push的用法介绍

帝国cms如何修改分类信息发布的内容生产图片格

标签： fetch, formData

上面是“fetch基本方法的调用”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2966.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！