Promise基本使用

什么是Promise

Promise基本使用_第1张图片
有时候业务场景会是这种回调地狱的方式,很难分辨清除逻辑
Promise基本使用_第2张图片
在这里插入图片描述
Promise基本使用_第3张图片
Promise基本使用_第4张图片
Promise基本使用_第5张图片

Promise三种状态

Promise基本使用_第6张图片

链式调用

Promise基本使用_第7张图片
Promise基本使用_第8张图片

Promise基本使用_第9张图片
Promise基本使用_第10张图片

小案例


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
head>

<body>
  <table>
    <thead>
      <tr>
        <th>序号th>
        <th>书名th>
      tr>
    thead>
    <tbody id="dataList">
    tbody>
  table>
  <h2>添加图书h2>
  <label for="name">
    书名:<input type="text" name="name" id="book_name">
  label>
  <input type="button" value="保存图书" id="getall">

body>
<script src="./js/jquery.min.js">script>
<script>
  // Promise
  var htmlStr = '';
  new Promise((resolve, reject) => {
      
    $.ajax({
      
      type: "get",
      url: "http://127.0.0.1:8000/show_books/",
      contentType: "application/json",
      success: function (response) {
      
        resolve(response.list)
        reject()
      }
    });

  }).then((list) => {
      
    list.forEach(element => {
      
      htmlStr += '' +
        element.fields.book_name
        + '' + element.fields.add_time
        + '';
    });
    document.getElementById("dataList").innerHTML = htmlStr

  }).catch(() => {
      
    alert('请求失败')
  })

  // 使用原始的请求方式
  /*  var htmlStr = '';
   $.ajax({
     type: "get",
     url: "http://127.0.0.1:8000/show_books/",
     contentType: "application/json",
     success: function (response) {
       if (response.status = 200) {
         var list = response.list;
         list.forEach(element => {
           htmlStr += '' +
             element.fields.book_name
             + '' + element.fields.add_time
             + '';
         });
         document.getElementById("dataList").innerHTML = htmlStr
       } else {
         alert("错误啦")
       }
     }
   });
   // 保存图书功能
   document.getElementById("getall").onclick = () => {
     var book_name = document.getElementById("book_name").value
     $.ajax({
       type: "GET",
       url:'http://127.0.0.1:8000/add_book/?book_name='+String(book_name),

       success: function (response) {
         console.log(response)
         if(response.msg=="success"){
           alert('保存成功')
         }
         return location.replace(document.referrer);
       }
     });
   } */

script>

html>

你可能感兴趣的:(Promise)