promise配合ajax使用

promise配合ajax使用

 

目录

原生ajax和promise的结合使用

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

ECMAscript 6 原生提供了 Promise 对象。

Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。

Promise 对象:

对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：

• pending: 初始状态，不是成功或失败状态。
• fulfilled: 意味着操作成功完成。
• rejected: 意味着操作失败。

promise对象是微任务！

创建ajax

1.创建XMLHttpReguest对象     

XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。、

 

2.向服务器发送请求

 

 

3.返回的数据

返回回来的是json格式，使用JSON.parse()方法转为对象

好了 现在我们了解了原生ajax的使用方法接下来我们就结合promise使用 开始！

----------------------------------------------------------------------------------------

 

      var obj = {
        methods: "GET",
        url: "1.text",
      }
      // 封装一个promise调用函数
      let ajaxPromise = (params) => {
        return new Promise((resj, rej) => {
          let xhr = new XMLHttpRequest()
          xhr.open(params.methods, params.url, params.async || true)
          xhr.send()
          xhr.onreadystatechange = () => {
            if (xhr.readyState == 4) {
              if (xhr.status == 200) {
                // 成功
                let res = JSON.parse(xhr.responseText) || ""
                resj(res)
              } else {
                // 失败
                rej(xhr.responseText)
              }
            }
          }
        }).catch((e) => {
          console.log("错误")
        })
      }

      let res = (_) => {
        ajaxPromise(obj).then(function (val) {
          console.log(val)
        })
      }
      res()

---