promise-ajax请求

王汪汪吖

已于 2022-08-04 14:44:23 修改

阅读量104

点赞数

分类专栏： js 文章标签： ajax javascript 前端

于 2022-08-04 14:07:05 首次发布

本文链接：https://blog.csdn.net/weixin_43791884/article/details/126154149

版权

js 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<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>Document</title>
</head>

<body>
  <div class="container">
    <h2 class="page-header">Promise发封装AJAX操作</h2>
    <button class="btn btn-primary" id="btn">
      点击发送AJAX
    </button>

  </div>
  <script>
    //接口地址 https://api.apiopen.top/getJoke
    // 获取元素对象
    const btn = document.querySelector("#btn");
    btn.addEventListener('click', function () {
     const p=new Promise((resolve,reject)=>{
       // 1.创建对象
       const xhr = new XMLHttpRequest();
      // 2.初始化
      xhr.open('GET', 'https://api.apiopen.top/getJoke')
      // 3.发送
      xhr.send();
      // 4.处理响应结果
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          //判断响应状态码2xx
          if (xhr.status >= 200 && xhr.status < 300) {
            //控制台输出响应体
            // console.log(xhr.response);
            resolve(xhr.response)
          }
          else {
            //控制台输出响应状态码
            // console.log(xhr.status);
            reject(xhr.status)
          }
        }
      }
     });
    //  调用then方法
    p.then(value=>{console.log(value);},
    reason=>{
      console.log(reason);
    })

    })
  </script>
</body>

</html>

// util.promisify 方法
const util=require('util');
//引入fs模块
const fs =require('fs')
//返回一个新的函数
let mineReadFile =util.promisify(fs.readFile);
mineReadFile('./resource/content.txt').then(value=>{
  console.log(value.toString());
},reason=>{
  console.log("出错了");
})