网站开发公众号开发,亚马逊网站建设分析,wordpress 七牛上传插件,提供邯郸做移动网站Promise的使用#xff0c;及使用Promise封装axios Promise是什么#xff1f;Promise的使用使用Promise封装请求 Promise是什么#xff1f;
Promise是JavaScript中用于处理异步操作的一种编程模式。它是一种表示异步操作最终完成或失败的对象。
一个Promise对象可以处于以下… Promise的使用及使用Promise封装axios Promise是什么Promise的使用使用Promise封装请求 Promise是什么
Promise是JavaScript中用于处理异步操作的一种编程模式。它是一种表示异步操作最终完成或失败的对象。
一个Promise对象可以处于以下三种状态之一
Pending进行中初始状态表示异步操作尚未完成。Fulfilled已完成表示异步操作成功完成。Rejected已拒绝表示异步操作失败。
当一个Promise处于Pending状态时它可以转变为Fulfilled状态或Rejected状态。一旦转变为其中一种状态Promise的状态就不会再改变。
Promise对象提供了一个.then()方法用于添加异步操作成功后的回调函数并返回一个新的Promise对象。这使得我们可以通过链式调用.then()来处理多个异步操作的顺序执行。
Promise也提供了.catch()方法用于添加异步操作失败后的错误处理回调函数。 还有.finally()方法无论Promise对象最终处于Fulfilled还是Rejected状态都会执行该方法中定义的逻辑。
Promise的使用
const myPromise new Promise((resolve, reject) {// 异步操作的代码if (/* 异步操作成功 */) {resolve(result); // 将Promise状态改为Fulfilled并传递结果} else {reject(error); // 将Promise状态改为Rejected并传递错误信息}
});myPromise.then((result) {// 异步操作成功后的处理逻辑
}).catch((error) {// 异步操作失败后的错误处理逻辑
}).finally(() {// 无论Promise最终的状态是成功还是失败都会执行的逻辑
});通过使用Promise我们可以更好地处理异步操作并提供清晰的控制流程和错误处理机制。
使用Promise封装请求
下面的示例封装了几个商品相关的接口
// 文件路径 /api/shop.js
import axios from axios;
import qs from qs;
// 商品列表
export const shopList () {return new Promise((resolve, reject) {axios({url: /api/shop/list,method: GET,}).then(res {let data res.data;// 请求成功if (data.code 1) {resolve(data)// 将Promise状态改为Fulfilled并传递结果} else {reject(data)// 将Promise状态改为Rejected并传递错误信息}})})
}
// 商品添加接收参数data
export const shopAdd (data) {return new Promise((resolve, reject) {axios({url: /api/shop/add,method: POST,data: qs.stringify(data)}).then(res {let data res.data;// 请求成功if (data.code 1) {resolve(data)// 将Promise状态改为Fulfilled并传递结果} else {reject(data)// 将Promise状态改为Rejected并传递错误信息}})})
}
// 商品删除接收参数data
export const shopDel (data) {return new Promise((resolve, reject) {axios({url: /api/shop/add,method: POST,data: qs.stringify(data)}).then(res {let data res.data;// 请求成功if (data.code 1) {resolve(data)// 将Promise状态改为Fulfilled并传递结果} else {reject(data)// 将Promise状态改为Rejected并传递错误信息}})})
}在需要的页面进行使用
import { shopList, shopAdd, shopDel } from /api/shop.js;
// 商品列表
shopList().then(res {// 处理逻辑console.log(res);
})
// 商品添加
shopAdd({ title: 商品名称, price: 100 }).then(res {// 处理逻辑console.log(res);
})
// 商品删除
shopDel({ id: 1 }).then(res {// 处理逻辑console.log(res);
})
