【原创纯手打】如何在项目中封装异步Promise原生AJAX(附源码)

终极萌萌暴龙战士

已于 2022-08-28 18:31:23 修改

阅读量135

点赞数 1

文章标签： ajax 前端 javascript 前端框架 ecmascript

于 2022-08-26 19:18:20 首次发布

本文链接：https://blog.csdn.net/weixin_60341434/article/details/126549026

版权

初始化变量

var xhr = new XMLHttpRequest()

连接接地址

xhr.open(method, url)

发送请求

xhr.send()

监测状态改变

xhr.onreadystatechange

然后使用readyState

//0 － （未初始化）还没有调用send()方法
//1 － （载入）已调用send()方法，正在发送请求
//2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
//3 － （交互）正在解析响应内容
//4 － （完成）响应内容解析完成，可以在客户端调用

合在一起就是

    function ajax({ url, method }) {
      return new Promise((resolve, reject) => {
        //1.初始化变量
        var xhr = new XMLHttpRequest()
        //2.连接接地址
        xhr.open(method, url)
        //3.发送请求
        xhr.send()
        //4.监测状态改变
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
              //5.获取数据
              var response = JSON.parse(xhr.response)
              // console.log(response)
              var list = response.result.list;
              // console.log(list)
              resolve(list)
            } else {
              reject(xhr.status)
            }
          }
        }
      })
    }

当调用的时候就要这么写

    ajax({
      url: "url", //输入需要接收数据的网址
      method: "GET"  //输入方法操作
    }).then(res => {
      // console.log(res,"####")

    }).catch(err => {
      console.log(err)
    })

但我们一般都在script标签中调用封装好的组件，于是在外面新建一个ajax.js

export default function ajax({ url, method }) {

  return new Promise((resolve, reject) => {

    //1.初始化变量
    var xhr = new XMLHttpRequest()
    //2.连接接地址
    xhr.open(method, url)

    //3.发送请求
    xhr.send()

    //4.监测状态改变
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        if (xhr.status >= 200 && xhr.status < 300) {
          //5.获取数据
          var response = JSON.parse(xhr.response)
          // console.log(response)
          var result = response.result;
          // console.log(list)
          resolve(result)

        } else {
          reject(xhr.status)
        }
      }
    }


  })

}

可以直接引入调用，也可以新建一个js文件调用

import ajax from "./ajax.js"

ajax({
  url: "url",
  method: "GET"
}).then(res => {
  console.log(res, "%%%%%")

  //操作dom
  var ul = document.querySelector("ul")
  var host = res.host;

  res.list.forEach(item => {

  })



})

最后在主页面中

<!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>
    <ul>

    </ul>
  </div>
</body>
<script type="module" src="./js/app.js"></script>

</html>