最近在进行前后端+一点点算法+本科课程学习的多线程状态,代价就是由于要干的事情太多以至于不知道要干嘛而形成死锁~~进入无限的摸鱼状态~~,所以写完这篇之后就先把前端学习放下,并适当减缓编程方面的学习比重.
而昨晚正好遇到了一个需要向后端发送请求的情况.就是将密码通过post表单发送给后端进行判断,毕竟密码这种东西不可能由前端判断吧.大家可以去看一下:http://beifen.elatis.cn/
而在使用原生js发送表单的时候遇到了一些问题.发送表单时会刷新一下页面,这就导致了无法正确登录.
所以只能使用异步请求来发送表单,而jQuery的$.ajax我完全没学过,只好使用React的fetch来进行了.
不说废话了,接下来就正式开始吧.

fetch的基本形式

fetch就是获取的意思,如果只是想要"请求一下",只要直接将url传给fetch即可

fetch("https://www.baidu.com/");

如果想要请求后端,就填上后端文件的所在位置

fetch("test.php");

实际上fetch有两个参数,只不过第二个参数可以缺省
然后我们当然不是没事请求一下后端玩的,一般请求后端是要将用户与网页交互的结果(如用户填的表单等)发送给后端,并由后端进行一些处理(存数据,返回给前端处理结果等)
想要请求的同时携带表单,就要给fetch传入第二个参数了.

首先看一下下面这个实例:

fetch(url, {
    method: 'POST',                             // *GET, POST, PUT, DELETE, etc.
    headers: {
      'user-agent': 'Mozilla/4.0 MDN Example',
      'content-type': 'application/json'
    },
    body: JSON.stringify(data),                 // must match 'Content-Type' header
    cache: 'no-cache',                          // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin',                 // include, same-origin, *omit
    mode: 'cors',                               // no-cors, cors, *same-origin
    redirect: 'follow',                         // manual, *follow, error
    referrer: 'no-referrer',                    // *client, no-referrer
  })

其实就是一个json对象...
所有可选参数和说明如下:

# method: 请求使用的方法，如 GET、POST。
# headers: 请求的头信息，形式为 Headers 的对象或包含 ByteString 值的对象字面量。
# body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
# mode: 请求的模式，如 cors、 no-cors 或者 same-origin。
# credentials: 请求的 credentials，如 omit、same-origin 或者 include。为了在当前域名内自动发送 cookie ， 必须提供这个选项， 从 Chrome 50 开始， 这个属性也可以接受 FederatedCredential 实例或是一个 PasswordCredential 实例。
# cache:  请求的 cache 模式: default 、 no-store 、 reload 、 no-cache 、 force-cache 或者 only-if-cached 。
# redirect: 可用的 redirect 模式: follow (自动重定向), error (如果产生重定向将自动终止并且抛出一个错误), 或者 manual (手动处理重定向). 在Chrome中，Chrome 47之前的默认值是 follow，从 Chrome 47开始是 manual。
# referrer: 一个 USVString 可以是 no-referrer、client或一个 URL。默认是 client。
# referrerPolicy: Specifies the value of the referer HTTP header. May be one of no-referrer、 no-referrer-when-downgrade、 origin、 origin-when-cross-origin、 unsafe-url 。
# integrity: 包括请求的  subresource integrity 值 （ 例如： sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=）。

然而实际上只有两个是必要的,那就是method和body
顺便有一个类可以帮我们生成一个表单数据:FormData
我们可以用它来存储键值对形式的数据
用法如下:

let formData = new FormData();          //创建一个FormData类
formData.append("password", password);  //添加一个数据,key为'password',value为变量password的值

有了它,我们可以实现两行搞定一个表单

fetch("test.php", {
        method:     "POST",
        body:       formData,
    })

发送完表单之后有时候我们需要进行一些额外操作,如接收后端返回的信息,获取错误编码等.
这时候就需要用到then和catch了
一般是写成这样的:

fetch(url,{
    method:"POST",
    //anyelse
}).then(function(res){
    //dosomething
    return res;
}).then(function(res){
    //dosomething
}).catch(function(err){
    console.log(err);
})

其中res是来自上一个then的返回值,或是fetch的返回值(第一个then或catch)
then的数量任意
而then和catch里面一般传入一个闭包函数来进行各种~~丧心病狂~~的处理
以下是一个实例:

        fetch("judge.php", {
            method:     "POST",
            body:       formData,
            }).then(function(res){
                if(res.status != 200){
                    console.log("Error, status: " + res.status);
                    return;
                }else{
                    console.log("Success, status: " + res.status);
                    return res;
                }
            }).then(function(res){
                let ret = res.text();
                console.log(ret);
                return ret;
            }).then(function(data){
                let val = data.PromiseValue;
                console.log(val);
            }).catch(function(err){
                console.log("Fetch Error: " + err);
            });

fetch的基本形式

评论