利用promise封装ajax

蔚落 2022-01-19 06:03 293阅读 0赞

#### 1.网上很多封装，但是自己觉得为什么要分开封装呢？get和post封装成一个函数不好么？根据自己以前封装的ajax顺手改了一下，并在自己的项目中使用了一下，还可以。 ####

function _ajax(options) {
      // body...
      try {
        // statements
        options = options || {};
        return new Promise((resolve, reject) => {
          let xhr;
          if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
          } else {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
          }
          if (options.type.toLowerCase() === 'get') {
            options.url = options.url + '?' + params(options.data);
            options.data = null;
          } else {
            options.data = params(options.data);
          }
          xhr.open(options.type, options.url);
    
          if (options.type.toLowerCase() === 'post') {
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
          }
          xhr.send(options.data);
          xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
              if (xhr.status === 200 || xhr.status === 304) {
                let data = xhr.responseText;
                resolve.call(undefined, data);
              } else {
                reject.call(undefined, xhr.status);
              }
            }
          }
        })
      } catch (e) {
        // statements
        console.log(e);
      }
    
    }
    复制代码

#### 2.使用方式 ####

_ajax({
        type: 'post',
        url: baseURL + 'url',
        data: {
          method: 'method',
          accessToken: options.accessToken,
          product_id: options.id,
          product_code: options.code,
          price: options.price
        }
      }).then(function (res) {
        console.log(res);
      }, function (err) {
        console.log(err);
      });
    复制代码

转载于:https://juejin.im/post/5cda64e5f265da036706cb60

发表评论取消回复

表情：

评论列表（有 0 条评论，293人围观）

还没有评论，来说两句吧...

相关阅读

相关使用Promise封装Ajax()

封装Ajax let _ajax = ({ method, url, data}) => { return ne

骑猪看日落/ 2023年10月08日 11:14/ 0 赞/ 19 阅读

相关 Promise_03封装 AJAX

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

向右看齐/ 2023年10月06日 17:26/ 0 赞/ 57 阅读

相关 Promise实战AJAX封装

一、利用Promise的知识，对最开始的ajax的例子进行一个简单的封装： var url = 'xxx'; // 封装一个get请求的方法 function req

灰太狼/ 2023年06月11日 10:23/ 0 赞/ 13 阅读

相关 promise封装XMLHttpRequest请求，封装ajax

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

清疚/ 2023年01月16日 14:21/ 0 赞/ 184 阅读

相关 promise对axios二次封装、promise封装ajax、promise封装wx.request、promise封装uni.reqest

在上一篇[Promise][]文章中我们学习了`promisse`的基本知识后，下一步就是`promise`如何使用呢？根据老湿从业8年的经验。将promise在项目中的使

╰半橙微兮°/ 2022年12月20日 01:24/ 0 赞/ 454 阅读

相关 Promise封装ajax

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

我不是女神ヾ/ 2022年10月11日 00:46/ 0 赞/ 260 阅读

相关 Ajax 搭配 Promise 封装

简述 Ajax（Asynchronous JavaScript And XML） Promise JavaScript

客官°小女子只卖身不卖艺/ 2022年05月25日 02:26/ 0 赞/ 270 阅读

相关 es6 Promise封装ajax

利用Promis 做一个简单的数据请求封装。 function requestP(options = {}) { const { ur

缺乏、安全感/ 2022年02月17日 08:47/ 0 赞/ 316 阅读

相关利用promise封装ajax

1.网上很多封装，但是自己觉得为什么要分开封装呢？get和post封装成一个函数不好么？根据自己以前封装的ajax顺手改了一下，并在自己的项目中使用了一下，还可以。

蔚落/ 2022年01月19日 06:03/ 0 赞/ 294 阅读

相关 promise封装ajax

关于promise使用时的几点： 1. 使用方法：先创建一个promise对象new Promise(),根据业务需求判断执行成功或失败，成功调用resovle(),

水深无声/ 2021年10月23日 21:26/ 0 赞/ 748 阅读