fetchjs的全面解析

发布时间：2023-05-18

一、fetchJSON_comment98

fetchjs 是一个封装了 fetch API 的 JavaScript 库，其目的是简化 fetch API 的使用。fetchjs 可以解决个别浏览器对 fetch API 的不兼容性问题，并实现了一些实用方法，支持 JSONP、表单提交、文件上传、流下载等多种功能。fetchjs 也可以使用查询参数来指定响应数据的格式，避免了手动解析响应数据的麻烦。 fetchJSON_comment98 是 fetchjs 中一个常用方法。该方法通过 JSONP 请求获取响应数据。使用 fetchjs 的 fetchJSON_comment98 方法请求数据时，只需要提供一个 URL 和回调函数即可。下面是 fetchJSON_comment98 的具体使用方式：

fetch.fetchJSON_comment98(url, function (response) {
  console.log(response);
});

fetchJSON_comment98 方法接受两个参数。第一个参数为 API 的 URL，该 URL 需要跨域；第二个参数为回调函数，用于处理服务器返回的数据。在回调函数中，可以进行数据的处理和展示，比如上述代码中的 console.log 就是将响应数据输出到控制台。

二、fetch 用法

fetchjs 的使用和 fetch API 的使用非常类似。fetch 方法接受一个 URL 参数，并返回一个 Promise 对象。该 Promise 会在响应时 resolve。对于请求的 HTTP 错误状态，即使 HTTP 200 也是在允许范围之外的。此时 fetch 也会 resolve promise，只是在 response 对象上标记一个 ok 属性为 false。 fetch 还支持另外一个参数 init，用来自定义请求。从 fetch 开发者工具看，你可以发现，实际发起的请求中大量使用了一种新的 header：fetch 请求头。比如，可以通过以下方式设置请求头：

fetch('/example', {
  headers: {
    'header1': 'value1',
    'header2': 'value2'
  }
})

fetch 还支持 ES6 的 Promise，这让异步网络操作更加容易处理：

fetch('/todos')
  .then(response => response.json())
  .then(data => console.log(data));

fetch 也支持 POST 请求，将 HTTP 方法设置为 POST：

fetch(url, {
  method: 'POST',
  body: JSON.stringify(data),
  headers:{
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

三、fetchJSON_comment98 采集标签

fetchJSON_comment98 采集标签是 fetchjs 中一个非常实用的方法。该方法可以模拟 form 表单提交，向服务器发送数据。下面是 fetchJSON_comment98 采集标签的具体使用方式：

fetch.postForm(url, {
  username: '123',
  password: '456'
}).then(function (response) {
  console.log(response)
}).catch(function (error) {
  console.log(error)
})

fetchJSON_comment98 采集标签方法接受两个参数。第一个参数是目标 URL，第二个参数是包含要提交的表单数据的 JavaScript 对象。在使用 fetch.postForm 方法时，fetch 会将表单数据转换成请求体并发送到目标 URL，然后回调返回服务器响应的数据。

四、js fetch 的用法

fetchjs 库不仅 API 简单，语法清晰舒适，而且是一个功能强大的 Ajax 工具。接下来我们来一起看一下 js fetch 的用法。

let url = 'http://www.example.com';
let data = {
    'name': 'fetch1',
    'age': 21
};
fetch(url+'?data='+JSON.stringify(data),{
    method : 'get',
}).then(function(res){
    console.log(res);
})

对于跨域访问，fetch 默认是不会带 cookie 的。需要添加 fetch 的 credentials 属性，如下：

fetch(url,{
    method : 'get',
    credentials: 'include',//带cookie
}).then(function(res){
    console.log(res);
})

fetch.js 也可以方便完成 POST、JSONP 等其他操作。

//post
fetch(url, {
    method : 'post',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    },
    body : 'a=1&b=2'
}).then(function(res){
    console.log(res);
});
//jsonp
fetch.jsonp(url,{
    callback:'handleResponse',//指定回调函数名
}).then(function(res){
    console.log(res);
});

五、fetch 文件上传

fetchjs 也支持文件上传功能。下面是 fetch 文件上传的代码示例：

let file = document.getElementById('file').files[0];
let formData = new FormData();
formData.append('file', file);
fetch('/upload', {
    method: 'POST',
    body: formData
}).then(response => {
    console.log(response);
});

在上传文件时，需要创建一个 FormData 对象并将文件添加到 FormData 中。然后将其作为 Body 传递到请求中。这样就可以上传文件了。

六、fetch 支持多种返回格式

fetchjs 支持多种返回格式：JSON、XML、Text 等。在默认情况下，fetchjs 会自动解析 JSON。

fetch(url)
  .then(res => res.json())
  .then(data => {
    console.log(data);
  });

如果服务器返回的不是 JSON 格式，可以使用其他的解析方法：

fetch(url)
  .then(res => res.text())
  .then(data => {
    console.log(data);
  });

fetchjs 也支持 XML 格式：

fetch(url)
  .then(res => res.xml())
  .then(data => {
    console.log(data);
  });

fetchjs 的多种返回格式为开发者提供了更多的选择和灵活性。

推荐文章