基于Promise手动封装ajax

promise-ajax.js

java 复制代码
function ajax({url='xxx', type="get", dataType="json"}) {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    xhr.open(type, url, true);
    xhr.responseType = dataType;
    xhr.onload = function () { // xhr.readState=4 xhr.status=200
      if(xhr.status == 200){
        resolve(xhr.response) //成功调用成功的方法
      }else{
        reject('not found');
      }
    };
    xhr.onerror = function (err) {
        reject(err) // 失败调用失败的方法
    };
    xhr.send();
  })
}

使用

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<body>
  <div id="app"></div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script src="promise-ajax.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      created(){
        ajax({url: './carts.json'}).then((res)=>{
          console.log(res)
        }, (err)=>{
          console.log(err)
        })
      },
      data: {
        products: []
      }
    })
  </script>
</body>
</html>
相关推荐
就改了13 小时前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_13 小时前
Ajax 入门
前端·javascript·ajax
乐予吕11 天前
Promise 深度解析:从原理到实战
前端·javascript·promise
Beginner x_u11 天前
[AJAX 实战] 图书管理系统下 编辑图书
前端·javascript·ajax·bootstrap
Beginner x_u11 天前
【AJAX 实战】图书管理系统上 渲染图书列表+新增图书+删除图书
前端·ajax·bootstrap
好青崧11 天前
ajax中get和post的区别
前端·ajax
赵得C12 天前
AJAX拦截器失效排查指南:当你的beforeSend有效但error/complete沉默时
前端·ajax·okhttp
qq_4639448612 天前
【Spark征服之路-3.2-Spark-SQL核心编程(一)】
sql·ajax·spark
这是个栗子12 天前
黑马头条-数据管理平台
前端·javascript·ajax
BUG收容所所长13 天前
深入理解 AJAX,从 XMLHttpRequest 到现代 Fetch API
前端·javascript·ajax