fetch的使用

前言

dva中封装了fetch，第一次使用，记录一哈。

参考博客

• 学会fetch的用法
• vue axios 配置上服务器后报错’Access-Control-Allow-Origin’ header]

正文

使用fetch发送post请求：

**
参数:
input:定义要获取的资源。可能的值是：一个URL或者一个Request对象。
init:可选,是一个对象，参数有：
	method: 请求使用的方法，如 GET、POST。
	headers: 请求的头信息，形式为 Headers 对象或 ByteString。
	body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
	mode: 请求的模式，如 cors、 no-cors 或者 same-origin,默认为no-cors,该模式允许来自 CDN 的脚本、其他域的图片和其他一些跨域资源，但是首先有个前提条件，就是请求的 method 只能是HEAD、GET 或 POST。此外，如果 ServiceWorkers 拦截了这些请求，它不能随意添加或者修改除这些之外 Header 属性。第三，JS 不能访问 Response 对象中的任何属性，这确保了跨域时 ServiceWorkers 的安全和隐私信息泄漏问题。cors模式允许跨域请求,same-origin模式对于跨域的请求，将返回一个 error，这样确保所有的请求遵守同源策略。
	credentials: 请求的 credentials，如 omit、same-origin 或者 include。
	cache:  请求的 cache 模式: default, no-store, reload, no-cache, force-cache, or only-if-cached.
返回值：一个 Promise，resolve 时回传 Response 对象。
*/
fetch(input, init).then(function(response) {  });
// 使用
fetch("http://127.0.0.1:7777/postContent", {
  method: "POST",
  headers: {
      "Content-Type": "application/json",
  },
  mode: "cors",
  body: JSON.stringify({
      content: "留言内容"
  })
}).then(function(res) {
  if (res.status === 200) {
      return res.json()
  } else {
      return Promise.reject(res.json())
  }
}).then(function(data) {
  console.log(data);
}).catch(function(err) {
  console.log(err);
});

fetch发送get请求：

//请求的网址
var url = "http://127.0.0.1:7777/list";
//发起get请求
var promise = fetch(url).then(function(response) {

   //response.status表示响应的http状态码
   if(response.status === 200){
     //json是返回的response提供的一个方法,会把返回的json字符串反序列化成对象,也被包装成一个Promise了
     return response.json();
   }else{
     return {}
   }

});
    
promise = promise.then(function(data){
  //响应的内容
	console.log(data);
}).catch(function(err){
	console.log(err);
})

遇到的问题

1、跨加粗样式域问题，如下所示：

解决：
第一步：在fetch的init中加入：model:“no-cors”。
第二步：在后端代码（controller）中加入：@CrossOrigin注解。

2、报错：‘Access-Control-Allow-Origin’ header]

解决：在fetch的init中加入：withCredentials: false

3、发送post请求遇到的问题

post请求所携带的数据，可以在chrome控制台的network中的headers中查看，以此判断请求数据是否正确。目前我知道的有两种情况，一种是请求数据在request payload中，一种是在form data中。显然，form表单提交的数据在form data中。
post发送方式一（）：

async function deleteProduct(param) {
  return new Promise(((resolve,reject)=>{
      let url = `http://127.0.0.1:8080/user/delete`;
      request(url,{
        method: "POST",
        model:"no-cors",
        withCredentials: false,
        headers:{
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body:`id=${param.id}`
      }).then(res=>{
        resolve(res.data);
      });
  }));
}