【ES6】掌握Promise和利用Promise封装ajax

最新推荐文章于 2024-05-15 22:57:19 发布
最新推荐文章于 2024-05-15 22:57:19 发布
阅读量1k 收藏
点赞数 1
分类专栏： JavaScript Ajax 文章标签： es6 ajax javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45867247/article/details/128986530
版权

💻 【ES6】掌握Promise和利用Promise封装ajax 🏠专栏：JavaScript
👀个人主页：繁星学编程🍁
🧑个人简介：一个不断提高自我的平凡人🚀
🔊分享方向：目前主攻前端，其他知识也会阶段性分享🍀
👊格言：☀️没有走不通的路，只有不敢走的人！☀️
👉让我们一起进步，一起成为更好的自己！！！🎁

文章目录

【ES6】掌握Promise和利用Promise封装ajax

一. 概念

Promise是ES6 新增的特性

目的：用来解决异步解决回调地狱问题

利用Promise类创建promise实例对象，类的参数是回调函数，回调函数又有两个参数(一般约定为resolve(成功)和reject(失败))

Promise 的基本语法

const 实例对象 = new Promise(回调函数)

eg：

const p = new Promise(function(resolve,reject){});

回调函数中的参数：

  • resolve：成功的回调
  • reject：失败的回调

Promise 的三个状态：

  • 持续：pending
  • 成功：fulfilled
  • 失败：rejected

Promise 的两种转换(三种状态变成两种可能)：

  • 从持续状态转换到成功
  • 从持续状态转换到失败

Promise 的实例原型方法：

  • then(函数)：成功状态的时候执行的方法
  • catch(函数)：失败状态的时候执行的方法
  • finally(函数) ：结束时执行的方法，不管状态是成功还是失败，finally都会执行

Promise 的调用方式 (链式调用)

  • 当在第一个then里面返回 一个新的promise对象的时候
  • 可以在第一个then后面继续第二个then
const p = new Promise(function (resolve, reject) {
    const time = Math.random() * 2000 + 2000
    console.log(time);
    setTimeout(() => {
        if (time > 3000) {
            console.log('成功');
            resolve("success");
        } else {
            console.log('失败');
            reject("reject");
        }
    }, 2000);
});
// 成功状态的时候执行
p.then(function (sa) {
    console.log(sa);
})
// 失败状态的时候执行
p.catch(function (sc) {
    console.log(sc);
});

使用函数简单封装Promise代码

function fz() {
    const p = new Promise(function (resolve, reject) {
        const time = Math.random() * 2000 + 2000
        console.log(time);
        setTimeout(() => {
            if (time > 3000) {
                resolve("success")
            } else {
                reject("reject");
            }
        }, 2000);
    });
    return p;
}
fz().then(function (num) {
    console.log("1成功", num);
}).then(function (num) {
    console.log("2成功", num);
}).then(function (num) {
    console.log("3成功", num);
}).catch(function (num) {
    console.log('失败', num);
}).finally(function () {
    console.log('无论最终是成功还是失败，都会执行');
})

二. Promise的静态方法

(1) all

语法：Promise.all([多个 Promise])

作用：用于将多个 Promise 实例，包装成一个新的 Promise 实例，接受一个数组作为参数，只有数组里面的每个状态都变成resolve，则新的 Promise 实例状态才会变成resolve。

function fz1() {
    const p = new Promise(function (resolve, reject) {
        const time = Math.random() * 2000 + 2000;
        console.log(time, '第一个请求');
        setTimeout(() => {
            if (time > 3000) {
                resolve({ code: 1, message: '成功' })
            } else {
                if (time < 2500) {
                    resolve({ code: 0, message: '失败1' })
                } else {
                    resolve({ code: 2, message: '失败2' })
                }
            }
        }, time)
    })
    return p;
}
function fz2() {
    const p = new Promise(function (resolve, reject) {
        const time = Math.random() * 2000 + 2000;
        console.log(time, '第二个请求');
        setTimeout(() => {
            if (time > 3000) {
                resolve({ code: 1, message: '成功' })
            } else {
                if (time < 2500) {
                    resolve({ code: 0, message: '失败1' })
                } else {
                    resolve({ code: 2, message: '失败2' })
                }
            }
        }, time)
    })
    return p;
}
function fz3() {
    const p = new Promise(function (resolve, reject) {
        const time = Math.random() * 2000 + 2000;
        console.log(time, '第三个请求');
        setTimeout(() => {
            if (time > 3000) {
                resolve({ code: 1, message: '成功' })
            } else {
                if (time < 2500) {
                    resolve({ code: 0, message: '失败1' })
                } else {
                    resolve({ code: 2, message: '失败2' })
                }
            }
        }, time)
    })
    return p;
}

Promise
    .all([fz1(), fz2(), fz3()])
    .then(res => console.log('成功', res))
    .catch(err => console.log('失败', err))

(2) race

语法：Promise.race([多个promise])

作用：将多个 Promise 实例，包装成一个新的 Promise 实例，接受一个数组作为参数，只要其中有一个实例率先改变状态，则整个的状态就跟着改变。

function fz1() {
    const p = new Promise(function (resolve, reject) {
        const time = Math.random() * 2000 + 2000;
        console.log(time, '第一个请求');
        setTimeout(() => {
            if (time > 3000) {
                resolve({ code: 1, message: '成功' })
            } else {
                if (time < 2500) {
                    resolve({ code: 0, message: '失败1' })
                } else {
                    resolve({ code: 2, message: '失败2' })
                }
            }
        }, time)
    })
    return p;
}
function fz2() {
    const p = new Promise(function (resolve, reject) {
        const time = Math.random() * 2000 + 2000;
        console.log(time, '第二个请求');
        setTimeout(() => {
            if (time > 3000) {
                resolve({ code: 1, message: '成功' })
            } else {
                if (time < 2500) {
                    resolve({ code: 0, message: '失败1' })
                } else {
                    resolve({ code: 2, message: '失败2' })
                }
            }
        }, time)
    })
    return p;
}
function fz3() {
    const p = new Promise(function (resolve, reject) {
        const time = Math.random() * 2000 + 2000;
        console.log(time, '第三个请求');
        setTimeout(() => {
            if (time > 3000) {
                resolve({ code: 1, message: '成功' })
            } else {
                if (time < 2500) {
                    resolve({ code: 0, message: '失败1' })
                } else {
                    resolve({ code: 2, message: '失败2' })
                }
            }
        }, time)
    })
    return p;
}
Promise
    .race([fz1(), fz2(), fz3()])
    .then(res => console.log('成功', res))
    .catch(err => console.log('失败', err))

(3) allSettled (ES2020新增)

语法：Promise.allSettle([多个promise])

作用：方法接受一个数组作为参数，数组的每个成员都是一个 Promise 对象，并返回一个新的 Promise 对象。只有等到参数数组的所有 Promise 对象都发生状态变更（不管是fulfilled还是rejected），返回的 Promise 对象才会发生状态变更。

简单理解就是：不管是成功还是失败，都会触发，并会把结果用数组的形式返回，数组里面放着每一个promise的结果

let p1 = new Promise((resolve, reject) => {
    resolve('1')
});
let p2 = new Promise((resolve, reject) => {
    reject('2')
});
let p3 = new Promise((resolve, reject) => {
    reject('3')
});

let allSettled = Promise.allSettled([p1, p2, p3]);
allSettled.then((res) => {
    console.log('then:', res); // 返回数组，数组里面有三个对象，对象里面区分成功和失败的值，状态是正常的。
    //status:resolve  value  /  status:reject reason
    console.log(res[0].status); // fulfilled
    console.log(res[0].value); // 1
    console.log(res[1].status); // rejected
    console.log(res[1].reason); // 2
});

(4) any

语法：Promise.any([多个promise])

作用：该方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例返回。Promise.any()不会因为某个 Promise 变成rejected状态而结束，必须等到所有参数 Promise 变成rejected状态才会结束。

let p1 = new Promise((resolve, reject) => {
    reject('1')
    // resolve('1')
});
let p2 = new Promise((resolve, reject) => {
    // reject('2')
    resolve('2')
});
let p3 = new Promise((resolve, reject) => {
    reject('3')
});

// 解析：
// 如果遇到成功的请求，通过then返回resolve传递给then对应的值，如果都是失败的状态，最终走catch输出默认的字符( All promises were rejected),执行catch里面的代码，无法获取reject里面传入的值。
let any = Promise.any([p1, p2, p3]);
any.then(res => {
    console.log('then:', res);
}).catch(msg => {
    console.log('catch代码'); 
    console.log(msg); //默认的字符All promises were rejected
});

(5) Promise的其他方法

以下两个方法主要是开发人员调试用的

  • resolve()强行把promise的状态改为成功

    let num = 10;
Promise.resolve(num).then(res => console.log(res))
console.log(1);

  • reject()强行把Promise的状态改为失败

    let num = 10;
Promise.reject(num).then().catch(res => {
    console.log(res) // 10
});
console.log(1); // 1

三. JavaScript容错处理

因为js代码如果出现错误，立刻停止，后续的代码不会执行。

console.log(a); // referenceError:a is not defined  
console.log(1);

所以需要采用方法使js代码出现错误时，不会影响到后续代码

try…catch…

语法1：

try {执行代码} catch (err) {执行代码}

使用：

首先执行try里面的代码，如果不报错，catch不执行
如果报错，不会抛出错误，而是执行catch，把错误信息给到err。

try {
    console.log(a);
} catch (e) { //e:try里面如果存在错误，e就是try里面的错误信息
    console.log(e); // referenceError:a is not defined  
    console.log('这里是catch的输出'); // 这里是catch的输出
}

console.log('后面后续的代码输出'); // 后面后续的代码输出
console.log('后面后续的代码输出'); // 后面后续的代码输出

语法2：

try {执行代码} catch (err) {执行代码} finally{执行代码}

注：finally里面的语法不管是执行try还是catch，finally里面的代码一定会执行。

try {
    console.log('a');
} catch (e) { //e:try里面如果存在错误，e就是try里面的错误信息
    console.log(e); // referenceError:a is not defined
    console.log('这里是catch的输出');
} finally { //收尾的工作，不再使用的对象，变量，设置null
    console.log('finally一定会执行');
}
/*
输出结果：
	a
	finally一定会执行
*/

应用场景-案例

随机生成一个数字，添加判断条件，最终输出成功或失败结果

function fz() {
    const p = new Promise(function (resolve, reject) {
        const time = Math.random() * 2000 + 2000
        console.log(time);
        setTimeout(() => {
            if (time > 2500) {
                resolve("success")
            } else {
                reject("reject");
            }
        }, 2000);
    });
    return p;
}
async function cs() {
    try {
        const res1 = await fz();
        console.log(res1);
    } catch (err) {
        const res2 = await fz();
        console.log(res2);
    }
}
cs()

四. 利用promise封装ajax

封装前的分析：

/*
        封装ajax 
            function ajax(options){}
        调用封装的ajax
            ajax({})

        分析
            封装方案
                1. 回调函数方式
                    - 将来使用的时候，可能会出现回调地狱
                2. promise 
                    - 后面 then/catch
                    - 也可以用async/await
            参数
                1. 请求地址 url 必填
                2. 请求方式 method，选填（只允许 get post），要么不传，默认值 get
                3. 是否异步 async，选填  默认true
                4. 参数 data 选填，默认是'', （允许传查询字符串 和 对象）
                5. 请求头headers 选填，默认{content-type:'application/x-www-form-urlencoded'}
                6. 是否解析响应的参数 dataType, 选填 默认是string,  选填 json
*/

封装代码：

// 对象格式转查询字符串格式
function queryString(obj) {
    let str = ''
    for (let k in obj) {
        str += `&${k}=${obj[k]}`
    }
    return str.slice(1)
}

// 利用闭包保存url基准地址
function createAjax(url) {
    // 设置一个变量作为基准地址，并长期保存这个变量
    let baseUrl = url

    // 封装ajax函数
    function ajax(options = {}) {
        // 1.验证参数格式
        // 1-1.验证url格式：必填
        if (!options.url) {
            // 没填抛出错误：'url必填'
            throw new Error('url必填')
        }
        // 1-2.验证method：要么不写，要么get或post
        if (!(options.method === undefined || /^(get|post)$/i.test(options.method))) {
            throw new Error('请求方式支持get 和 post')
        }
        // 1-3.验证async：要么不写，要么true/false ===> 参数是布尔类型
        if (!(options.async === undefined || typeof options.async === 'boolean')) {
            throw new Error('async需要一个布尔值')
        }
        // 1-4.验证data：要么不写，支持字符串格式/对象格式
        if (!(options.data === undefined || typeof options.data === 'string' || Object.prototype.toString.call(options.data) === '[object Object]')) {
            throw new Error('data需要一个字符串格式或者对象格式')
        }
        // 1-5.验证headers：要么不写，要么是对象格式
        if (!(options.headers === undefined || Object.prototype.toString.call(options.headers) === '[object Object]')) {
            throw new Error('headers需要一个对象格式')
        }
        // 1-6.验证dataType参数：要么不写，要么是string 或者 json 
        if (!(options.dataType === undefined || /^(string|json)$/.test(options.dataType))) {
            throw new Error('dataType 只能写 string json')
        }

        // 2.准备一个默认值
        const _default = {
            // 修改请求地址：基准地址+options.url
            // eg：options.url = /test/first
            url: baseUrl + options.url,
            // method只有三个选择（没写，get，post）
            method: options.method || 'get',
            // async只有三个选择（没写，true，false）并且没写：默认值是true
            // 一个ES2020新的操作符 ??
            // ?? 空值运算符: 只有左边的是undefined或者null, 才使用右边的
            async: options.async ?? true,
            // data只能有三个选择：字符串、对象、undefined，默认值是''
            data: options.data || '',
            // headers只能是 undefined或者对象，默认是{'content-type': 'application/x-www-form-urlencoded'}
            headers: { 'content-type': 'application/x-www-form-urlencoded', ...options.headers },
            // 是否解析响应的参数 dataType, (选填) 默认是string,  (选填) json
            dataType: options.dataType || 'string'
        }
        // 2-1.data可能是对象，如果是对象，需要转为查询字符串格式
        if (typeof _default.data === 'object') {
            _default.data = queryString(_default.data)
        }
        // 2-2.请求方式是get并且data有值，url需要拼接上刚刚转换的data
        if (/^get$/i.test(_default.method) && _default.data) {
            _default.url = _default.url + '?' + _default.data
        }

        // 3 创建ajax对象 按照promise方式
        const p = new Promise(function (resolve, reject) {
            const xhr = new XMLHttpRequest()
            xhr.open(_default.method, _default.url, false)
            xhr.onload = function () {
                // 这里的xhr.readyState必然是4，onload是一个请求完成的事件
                // 如果请求成功，xhr状态码是4，http状态码是200-299 成功
                // 需求， 根据业务进一步封装，如果后端返回的内容中，code为1，成功，其他失败
                if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
                    let res = xhr.responseText
                    // 根据服务端返回的内容判断
                    // 首先代码进入到这里，http请求成功，可以成功从服务端拿到响应内容
                    // 响应内容分两种情况，
                    // 一个是正确的
                    // 一个是业务错误 （参数不正确，代码错误，其他....）
                    // 根据后端返回的内容判断, code:1 正确的 成功
                    // code 不是1 错误（用户密码错误，登录时间过期 ）
                    try {
                        res = JSON.parse(res)
                    }
                    catch (err) {
                        return
                    }
                    if (res.code === 1) {
                        // 正确的：成功返回正确的数据 
                        resolve({ code: 1, message: "成功", data: _default.dataType === 'string' ? xhr.responseText : res })
                    } else {
                        // 错误：包括各种错误 
                        resolve({ code: 0, message: '业务失败', err: res })
                    }
                } else {
                    // 请求不成功 -- 进入这里的代码必然是http状态码不是200-299的情况
                    let res = xhr.responseText
                    resolve({ code: 0, message: '网络请求失败', err: res })
                }
            }
            // 如果post 
            if (/^post$/i.test(_default.method)) {
                xhr.setRequestHeader('content-type', _default.headers['content-type'])
            }
            // 如果有token 
            if (_default.headers.authorization) {
                xhr.setRequestHeader('authorization', _default.headers['authorization'])
            }
            // 如果是post 需要发送data
            if (/^post$/i.test(_default.method)) {
                xhr.send(_default.data)
            } else {
                xhr.send()
            }
        })
        // 把promise对象返回
        return p
    }
    // 返回ajax函数
    return ajax
}
// 设置url基准地址
let ajax = createAjax('http://localhost:8888')

测试：

// 1.利用Promise的then()方法测试封装的ajax
// ajax({
//     url: '/test/first',
// }).then(res => {
//     console.log(res);
// })

// 2.利用async await 测试封装的ajax
async function fn() {
    const res = await ajax({ url: '/goods/list', dataType: 'json' })
    console.log(res);
}
fn()

注：测试前需要开启本地服务器

本地服务器下载地址：Ajax案例测试本地服务器-Node.js文档类资源-CSDN文库

五. async和await

  1. async其实就是promise的语法糖。函数前面加一个async，函数里面异步操作的方法前加一个await关键字。

    顾名思义，await就是让你等一下，执行完了再继续往下走。

    注意：await只能在async函数中执行，否则会报错。

    目的：让异步代码像同步代码一样执行。

  2. async:异步的意思，作用是申明一个异步函数，函数的返回值是promise 对象

    async function fn1() { }
console.log(fn1()); //async函数隐式返回一个promise对象

  3. await:等待

    await是async+wait的结合 即异步等待，async和await 二者必须是结合着使用。

    注：匿名函数也可以使用async和await

    !async function () {
    let h = await new Promise((resolve, reject) => {
        resolve('hello')
    });
    console.log(h); //hello  证明await就是promise里面then的语法糖。
}();

结束语：

希望对您有一点点帮助，如有错误欢迎小伙伴指正。
👍点赞：您的赞赏是我前进的动力！
⭐收藏：您的支持我是创作的源泉！
✍评论：您的建议是我改进的良药！
一起加油！！！💪💪💪

繁星学编程
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
微信小程序Http高级封装 es6 promise
03-29
看了下小程序的请求方式大概和ajax请求差不多，所以先打好基础 从封装http请求开始 好了废话不多说了，上代码 首先。。。。当然是建立配置文件，用来配置请求根路径 config.js export default { basePath: '...
小程序使用es6封装ajax源码案例
06-25
在这个“小程序使用es6封装ajax源码案例”中，我们将深入探讨如何利用ES6的Promise和模块化特性来优雅地实现Ajax请求，并将其应用到微信小程序的开发中。 首先，让我们理解一下核心概念： 1. **ES6**：这是...
onreadystatechange 事件
热门推荐
sereasuesue的博客
09-09 1万+
onreadystatechange 事件 当请求被发送到服务器时，我们需要执行一些基于响应的任务。 每当 readyState 改变时，就会触发 onreadystatechange 事件。 readyState 属性存有 XMLHttpRequest 的状态信息。 下面是 XMLHttpRequest 对象的三个重要的属性： 属性 描述 onreadystatechange...
利用promise封装Ajax
weixin_62547055的博客
03-06 186
promise
es6新语法和ajax和json
最新发布
luosuss的博客
05-15 457
在js中如果定义的函数有参数，调用的时候可以不传递实参，那么形参变量名就是undefined类型，值也是undefined，所以调用函数的时候。在json中，string类型的双引号可以省略，但是建议加上。let 函数名 =(参数1,参数2...)=>{函数体};1.json在js中是一个对象，在java中是字符串。3.json的字符串必须使用双引号包围（单引号不行）如果函数体就一句话，可以省略{}和return。模板字符串，要使用``重音符，使用${标识符}1. {} 表示对象。2. [] 表示数组。
创建AJAX和使用Promise封装AJAx
晨曦的博客
02-14 183
还可以为这个对象添加一个状态监听函数。一个XMLHttpRequest对象一共有5个状态，当它的状态变化时会触发onreadystatechange事件，可以通过设置监听函数，来处理请求成功后的结果。当对象readystate变为4的时候，代表服务器返回的数据接收完成，这个时候可以判断请求的状态，如果状态是2XX或者304的话则代表返回正常。2.在这个对象上使用open方法创建一个HTTP请求，open方法所需要的参数是请求的方法，请求的地址，是否异步和用户的认证信息。使用promise封装Ajax。
前端每日一练：使用 Promise 封装 AJAX 请求
SAXX2的博客
03-13 518
前端每日一练：将原生的 ajax 封装成 promise。
使用promise封装Ajax网络请求
Hdmi764287459的博客
08-22 96
以上是通过promise封装网络请求实例，在今后前后端交互网络请求中我们会用的非常多希望大家多理解掌握封装思想，会大大减少我们代码的重复量，更好维护；
ES6新特性六：promise对象实例详解
08-30
在实际开发中，Promise常用于封装Ajax操作。例如，我们可以创建一个`getJSON`函数，返回一个Promise对象，用来获取JSON数据： ```javascript var getJSON = function(url) { return new Promise(function...
umax:这是一个npm模块的源码，该模块是基于ES6的Promise封装的的ajax，特别是能非常简单地操作文件上传
03-24
该模块是基于ES6的Promise封装的ajax，特别是能非常简单地操作文件上传，模块还提供了文件压缩，文件转换等方法。 该模块基于ES6 Promise包ajax，特别是可以非常简单地操作文件上传，该模块还提供文件压缩，文件转换...
new Promise 结合ajax 单个请求与多个请求写法
ProgramarQin的博客
10-10 3124
前言：忽如一夜春风来，千树万树梨花开，今天的天气突然变得很冷，又是保暖之际。由于自己隔段时间会把promise的写法忘记，又参考了廖雪峰大大的学习文章，小记写法汇总。 单个ajax请求执行写法 new Promise(function (resolve, reject) {    log('start new Promise...');     var timeOut = Math.rand...
Promise基本使用 ，promise 与 Ajax封装
Allen的博客
11-29 596
btn.addEventListener('click',function(){//添加点击事件。//第一个回调函数onResolved()是Promise对象的状态变为resolved时调用。//第二个回调函数onRejected()是Promise对象的状态变为rejected时调用。//这两个函数都是可选的，不一定要提供。setTimeout(()=>{ //包裹一个异步操作。对象用来封装一个异步操作并可以获取其成功/失败的结果值。//then方法可以接受两个回调函数作为参数。这几个方法，原型上有。
Promise+封装Ajax
m0_60997531的博客
07-05 409
封装完后即可正常使用了，不过一般来说，我个人在项目中会直接引入axios依赖 这样也是可以的
promise使用ajax前后端调用的高级用法
weixin_58276266的博客
07-01 276
promise 是一个异步调用的变成方案(方法),它提供了一些API的使用,从而实现了异步调用的方式 , 避免了层层嵌套的问题 层层嵌套的弊端:如果中间一个程序出现问题那么整个程序就无法执行 ; 通过promise的方式解决原始ajax层层嵌套的问题(原始是使用闭包解决) let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。。const 声明一个只读的常量，一旦声明，常量的值就不能改变。 使用对象的条件器和使用参数条件器的区别 参数条件器 对象的条件器 axios 作用
用promise封装ajax_ES6中Promise封装ajax的写法
weixin_42133415的博客
02-05 381
1.依赖jquery的写法可以使用下面的(function($){$.extend({ajaxPromise: param => {return new Promise((resolve, reject) => {$.ajax({method: param.method || "GET",dataType: "JSON",url: param.url,data: param.data...
原生ajax封装成Promise
qq_40826764的博客
03-21 1147
代码： function myAjax(method,url,params){ this.state = 'FULFILLED' this.fulfillList = [] this.rejectList = [] (function(that){ var data = null ...
ES6语法封装AJAX请求(含详细代码需求)
m0_67212141的博客
12-23 301
快来学习吧，原创不易，多多支持呀！每篇都是干货!
Promise的基本用法，基于Promise处理ajax请求
背心的博客
10-22 4090
Promise的基本用法
es6的promise的ajax,es6中promise实现ajax的例子
weixin_35125164的博客
08-05 575
function getData(url){var pro = new Promise(function(resolve,reject){var xhr = null;try{xhr = new XMLHttpRequest()}catch(e){xhr = new ActiveXObject("Microsoft.XMLHTTP");}xhr.open("get",url);xhr.onread...
ajax如何封装请求方法promise
04-27
可以使用ES6中的Promise对象来封装ajax请求方法，具体步骤如下： 1. 创建一个Promise对象，该对象接受一个函数作为参数，该函数包含两个参数resolve和reject。 2. 在该函数中，使用XMLHttpRequest对象发起ajax请求，并在请求成功或失败时调用resolve和reject方法。 3. 将XMLHttpRequest对象的open、send和onreadystatechange方法封装到一个函数中，该函数返回一个Promise对象。 4. 在调用该函数时，使用then方法来处理请求成功或失败的情况。 下面是一个简单的封装ajax请求方法的示例代码： ```javascript function ajax(url, method, data) { return new Promise(function(resolve, reject) { const xhr = new XMLHttpRequest(); xhr.open(method, url); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { resolve(JSON.parse(xhr.responseText)); } else { reject(xhr.status); } } }; xhr.send(JSON.stringify(data)); }); } ``` 在调用该方法时，可以使用then方法来处理请求成功或失败的情况： ```javascript ajax('/api/user', 'POST', {name: 'John', age: 30}) .then(function(response) { console.log(response); }) .catch(function(error) { console.log(error); }); ``` 以上代码中，ajax函数返回一个Promise对象，当请求成功时，resolve方法会返回响应数据；当请求失败时，reject方法会返回错误状态码。在调用ajax函数时，使用then方法来处理请求成功的情况，使用catch方法来处理请求失败的情况。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

繁星学编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值