Promise封装ajax

最新推荐文章于 2024-03-13 11:16:45 发布

陌一一

最新推荐文章于 2024-03-13 11:16:45 发布

阅读量1.6k

点赞数 1

分类专栏： web前端开发文章标签： ajax javascript 前端 json html

本文链接：https://blog.csdn.net/a1598452168YY/article/details/127829607

版权

web前端开发专栏收录该内容

281 篇文章 15 订阅

订阅专栏

在原来封装ajax的js文件下，再写promise封装的ajax，到时候你引入js，想用什么版本的，就引入什么版本的；
有版本：ajax版本的、promise版本的；
promise封装的ajax是在调用原生ajax的基础上写的；

js代码：里面有原生ajax版本的和promise版本的ajax，想用哪一个直接调用函数即可，

//因为data有可能会传进来的是一个对象，但post传的信息格式只有两种，一个是json对象，一个是表单
//这个函数是为了将对象转换为表单的格式
//函数调用在下面
function queryStringify(obj) {
    let str = ''
    for (let k in obj) str += `${k}=${obj[k]}&`
    //这个for循环执行后的结果是这样子的格式：
    //username=yiyi&password=123&
    //然后下面再用slice从0位置截取到最后一个位置的字符，但不包括最后一个字符
    //也就是截取下来的信息是这样的：username=yiyi&password=123
    return str.slice(0, -1)
  }
  
  // 封装 ajax
  //options是一个大对象，接收的形参；
  //因为到时候会从这个大对象了解构出来下面的url、method、async、data、headers等
  function ajax(options) {
    //定义一个defaultoptions默认对象，全部参数都定义了，防止options的实参有些参数没定义，就可以使用这里的默认值；
    let defaultoptions = {
      url: "",
      method: "GET",
      async: true,
      data: {},
      headers: {},
      success: function () { },
      error: function () { }
    }
    
    let { url, method, async, data, headers, success, error } = {
      ...defaultoptions,
      ...options
    }
    console.log(url, method, async, data, headers, success, error)
  
  
    if (typeof data === 'object' && headers["content-type"]?.indexOf("json") > -1) {
      data = JSON.stringify(data)
    }
    else {
      //queryStringify函数在最上面定义了
      data = queryStringify(data)
    }
    
    // 如果是 get 请求, 并且有参数, 那么直接组装一下 url 信息
    if (/^get$/i.test(method) && data) url += '?' + data
    
    // 4. 发送请求
    const xhr = new XMLHttpRequest()
    xhr.open(method, url, async)
    xhr.onload = function () {
      if (!/^2\d{2}$/.test(xhr.status)) {
        // console.log(error)
        error(`错误状态码:${xhr.status}`) //回调,执行error的回调函数，括号里是实参，
        return
      }
  
    // 执行解析
    //写try{}catch{}的作用是：可能后端传过来的数据解析错误，那success就执行不了，
    //下面的代码也都执行不了了，就卡在那里了，为了即使上面出错了，下面代码也能执行所以用了这样一个结构
    //如果发生try里面的代码发生错误，就执行catch的代码，不会因为错误代码就停了，出错了还会继续执行，但是会给你打印一个错误信息
      try {
        let result = JSON.parse(xhr.responseText)
        success(result)
      } catch (err) {
        error('解析失败 ! 因为后端返回的结果不是 json 格式字符串')
      }
    }
  
    // console.log(22222)
  
    // 设置请求头内的信息
    //请求头信息可能有多个，所以这里用for循环把它们遍历出来
    //将content-type设置在headers中
    for (let k in headers) xhr.setRequestHeader(k, headers[k])
    //设置一个既适用于get方式又适用于post方式的方法：
    if (/^get$/i.test(method)) {
        xhr.send()
      } else {
        xhr.send(data)
      }
  
    //  xhr.send(data)
   }

//promise版本的ajax，promise封装ajax
function pajax(options){
  var q = new Promise(function(resolve,reject){
    ajax({
      ...options,
      success:function(res){
        resolve(res)

      },error:function(err){
        reject(err)

      }
    })

  })
  return q
}

html代码：

<body>
    <script src="util _copy.js"></script>
    <script>
        pajax({
            url: "http://localhost:3000/news",
            data: { author: "yiyi" }
        }).then(res=> {
            // console.log(res)
            return pajax({
                url: "http://localhost:3000/comments",
                data: { newsId: res[0].id }
            })
        }).then(res=>{
            console.log("success",res)
        }).catch(err=>{
            console.log("error",err)
        })
    </script>
</body>

json文件：

{
    "news":[
        {"id":1,"title":"男人看了沉默，女人看了流泪","author":"yiyi"},
        {"id":2,"title":"震惊！他年薪仅1元","author":"linlin"}
    ],
    "comments":[
        {"id":1,"body":"我是男人","newsId":1},
        {"id":2,"body":"我是女人","newsId":1},
        {"id":3,"body":"我年薪2元","newsId":2},
        {"id":4,"body":"我年薪3元","newsId":2}
    ]
}