fetch发送http请求

fetch发送http请求

推荐MDN文档中使用 Fetch
——
Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

注意：fetch PC端有兼容性 ， 在移动端安卓等可以使用

    // 【1】 fetch的基本使用
    // fetch 返回值是 promise
    var fetch_promise = fetch('./fetch_text.text')
    // var fetch_promise = fetch('./fetch_text.php')

    fetch_promise.then(function (response) {
      // 数据配置阶段 => 返回一个新的promise对象
      // console.log(response); 可以查看response里面方法
      // 如果调用 response.json() 那么我们在后续的then之中就不用JSON.parse 转换数据了，
      // 因为数据已经被转换成对象数组格式了;
      // 而 response.text(); 以纯字符的形式进行输出;
      return response.text()
      // return response.json()
    })
      // 在后面处理使用这个新的promise对象
      .then(function (res) {
        // 结果输入
        console.log(res)
      })


    // 【2】 fetch 请求配置
    // get 和 post
    var fetch_promise = fetch("./fetch_text.php", {
      method: "POST",
      // body里面传 data 数据
      body: "username=fqniu&password=123456",
      // 设置头文件
      header: {
        "content-type": "application/x-www-form-urlencoded"
      }
    })
    fetch_promise.then(function (response) {
      // response.json(); 数据已经被转换成对象数组格式
      return response.json()
    })
      .then(function (jsonDate) {
        console.log(jsonDate)
      })
      .catch(function () {
        // 打印错误
        console.log("报错", arguments)
        alert("抱歉，服务器开小差了哦")
      })

    // 注意点：response.json() 这个方法必须接受json数据，不然报错如下
    // [SyntaxError: Unexpected token } in JSON at position 15, callee: ƒ, Symbol(Symbol.iterator): ƒ]
    

fetch和async_await的使用

html文件

    // promise 的语法糖写法：
    // async 定义一个异步函数，可以把异步程序当成同步程序来写
    // await 表示等待异步程序执行

    // 定义一个异步函数
    async function fun() {
      // 在promise之前写await 
      // awiat 之后会等到 promise 编程resolve在执行，其他程序在等待状态
      // 这里用fetch 简化promise.then
      let response = await fetch("./fetch_text.php")
      let data = await response.json()
      return data
    }

    async function fun2() {
      var res = await fun()
      console.log(res)
      // 数据可以渲染 使用
      document.write("<h1>" + res.a + "</h1>")
    }

    // 最后调用函数
    fun2()

    // 结果为get请求 
    // 打印结果为php里面的数据 {a: "hello world"}
    

fetch_text.php文件

<?php
  echo '{"a":"hello world"}';
?>

或者其他写法拓展

  项目中注册页部分代码使用 fetch 和 async 和 await 
  /*
  注册页如下：

  【1】注册功能思路
    1、给注册按钮绑定点击事件 (因为是异步程序，所以这里使用async和await)

    2、因为注册按钮为a标签 , 所以 阻止 的默认跳转事件行为

    3、获取输入框中的登录值和密码值

    4、把数据发送给前端 通过 fetch 发送请求
      4.1 fetch中的 第一个参数为url 第二个参数是 请求方式和body值配置，第三个参数 是设置header

    5、await 接收响应的数据 并把数据的 json类型 转为 对象或数组

    6、判断数据是否成功
      6.1 如果成功 跳转到登录页面
      6.2 如果不成功 则弹出错误 (注册有误)
  */


  // 点击按钮 ， 阻止默认事件;
  // 发送请求给后端;
  $("#register_btn").onclick = async function (evt) {
    // 阻止默认事件;
    var e = evt || event;
    e.preventDefault();
    // 获取输入框之中的数据;
    var email_value = $("#inputEmail").value;
    var password_value = $("#inputPassword").value;
    // 把数据发送到后端;
    /* fetch 有三个参数
      第一个参数为 url 
      第二个参数为 请求方式和数据
      第三个参数为 设置header 
    */
    let response = await fetch("../server/register.php", {
      method: "POST",
      body: formate({
        email: email_value,
        password: password_value
      }),
      headers: {
        "Content-Type": "application/x-www-form-urlencoded"
      }
    })
    // 接收后端返回响应的数据 并使用json方法把数据改为对象类型 
    let data = await response.json();
    console.log(data)

    // 根据后端返回的数据，判断用户名是否可以跳转到登录页 
    // 如果数据判断是false 则提示注册信息有误 
    // 有误的可能原因：已经存在注册过
    if (data.type === "success") {
      location.href = "./login.html";
    } else {
      alert("注册信息有误");
    }
  }

register.php文件

<?php

/*
  注册页 
  后端的思路：
  1、获取前端传过来的数据，这里是用户名和密码
  2、连接数据库，并选择数据库
  3、操作数据库
     3.1 编写sql语句
     3.2 执行sql语句
     3.3 返回的资源类型进行遍历处理
  4、判断数据是否在存在，有就关闭数据库 并返回json数据 die结果
  5、把注册的 数据 (用户名和密码) 插入 数据库中
     5.1 插入数据到数据库中
     5.2 执行sql语句
  6、判断是否插入成功 
*/

  # 接受前端的用户信息;
  $email = $_POST["email"];
  $password = $_POST["password"];

  # 链接数据库 ， 比对数据库之中是否存在这条信息;
  # 1. 建立链接
  $con = mysql_connect("localhost", "root" , "nfq123456");
  # 2. 选择数据库 
  mysql_select_db("udata");
  mysql_query("set names utf8");
  # 3. 操作数据库
  // 1. 编写 sql 语句;
  // 2. php的API去执行sql语句; 
  // - 字段名需要使用 `` 引起来 
  // - 关键字要大写
  // $sql = 'SELECT `email` FROM `user` WHERE `email`="'.$email.'"';
  // 这样外面是 双引号 里面变量用 单引号 也可以
  $sql = "SELECT `email` FROM `user` WHERE `email`='$email'";

  $res = mysql_query($sql);
  // # 4. 把返回的资源类型进行遍历处理
  $arr = mysql_fetch_array( $res );

  if($arr){
      mysql_close($con);
      die('{"type":"error","msg":"用户名重名"}');
  }

  # 没有重复数据 : 
  $insert_sql = "INSERT INTO `user` ( `email` , `password`) VALUES ('$email' , '$password')";

  // 执行sql语句
  $res = mysql_query($insert_sql);
  
  # 根据 $res 判定插入是否成功;
  if($res){
      echo '{"type":"success","msg":"注册成功"}';
  }else{
      echo '{"type":"error","msg":"数据库错误"}';
  }

?>