这个fetch函数是属于全局对象的，可以直接去调用。

    首先我们先在服务端修改一段代码给fetch请求

    1. //省略部分内容
    2. ...
    3. //fetch服务
    4. app.all('/fetch-server',(request,response)=>{
    5.     //设置响应头    设置允许跨域(第一次接触Ajax，不需要完全理解代码)
    6.     response.setHeader('Access-Control-Allow-Origin','*');
    7.     //允许接收所有类型的响应头
    8.     response.setHeader('Access-Control-Allow-Headers','*');
    9.     const data = {
    10.         "name": "yuque"
    11.     };
    12.     let str = JSON.stringify(data);
    13.     //设置响应体
    14.     response.send(str);
    15. })

    fetch函数的参数如图
    image.png

    下面在前端代码中演示fetch函数的使用

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8. </head>
    9. <body>
    10.     <button>fetch发送ajax请求</button>
    11.     <script>
    12.         const btn = document.querySelector('button');
    13.         btn.onclick = function(){
    14.               //url中需要参数可以直接添加
    15.             fetch("http://127.0.0.1:8000/fetch-server??id=123&vip=10",{
    16.                 //请求方法
    17.                 method: "POST",
    18.                 //请求头
    19.                 headers:{
    20.                     name:"abc"
    21.                 },
    22.                 //请求体
    23.                 body: "username=1313&password=sdadsads"
    24.             }).then(response => {
    25.                 console.log(response);
    26.             })
    27.         }
    28.     </script>
    29. </body>
    30. </html>

    这样就可以在控制台看到响应的结果。

    image.png

    但是如果我们想获取响应体就不能直接获取，需要使用text()方法，如下：

    1. btn.onclick = function(){
    2.   fetch("http://127.0.0.1:8000/fetch-server?id=123&vip=10",{
    3.     //请求方法
    4.     method: "POST",
    5.     //请求头
    6.     headers:{
    7.     name:"abc"
    8.     },
    9.     //请求体
    10.     body: "username=1313&password=sdadsads"
    11.   }).then(response => {
    12.     //这里返回text()方法
    13.       return response.text();
    15.   }).then(response => {
    16.     //再次调用then，这时response中就是响应体结果了
    17.       console.log(response);
    18.   })
    19. }

    这时来到浏览器中，可以看到确实输入了响应体结果。

    image.png

    如果返回的是JSON对象，我们可以使用return response.json();方法，这样就会自动转换为js对象了。

    image.png