Promise的使用,及使用Promise封装axios

Promise的使用,及使用Promise封装axios

Promise是什么?

Promise是JavaScript中用于处理异步操作的一种编程模式。它是一种表示异步操作最终完成或失败的对象。

一个Promise对象可以处于以下三种状态之一:

  • Pending(进行中):初始状态,表示异步操作尚未完成。
  • Fulfilled(已完成):表示异步操作成功完成。
  • Rejected(已拒绝):表示异步操作失败。

当一个Promise处于Pending状态时,它可以转变为Fulfilled状态或Rejected状态。一旦转变为其中一种状态,Promise的状态就不会再改变。

Promise对象提供了一个.then()方法,用于添加异步操作成功后的回调函数,并返回一个新的Promise对象。这使得我们可以通过链式调用.then()来处理多个异步操作的顺序执行。

Promise也提供了.catch()方法,用于添加异步操作失败后的错误处理回调函数。

还有.finally()方法,无论Promise对象最终处于Fulfilled还是Rejected状态,都会执行该方法中定义的逻辑。

Promise的使用

js 复制代码
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封装请求

下面的示例封装了几个商品相关的接口

js 复制代码
// 文件路径: /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,并传递错误信息
      }
    })
  })
}

在需要的页面进行使用

js 复制代码
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);
})
相关推荐
gnip3 分钟前
项目开发流程之技术调用流程
前端·javascript
答案—answer3 分钟前
three.js编辑器2.0版本
javascript·three.js·three.js 编辑器·three.js性能优化·three.js模型编辑·three.js 粒子特效·three.js加载模型
LIN-JUN-WEI15 分钟前
[ESP32]VSCODE+ESP-IDF环境搭建及blink例程尝试(win10 win11均配置成功)
c语言·开发语言·ide·vscode·单片机·学习·编辑器
转转技术团队16 分钟前
多代理混战?用 PAC(Proxy Auto-Config) 优雅切换代理场景
前端·后端·面试
南囝coding18 分钟前
这几个 Vibe Coding 经验,真的建议学!
前端·后端
gnip31 分钟前
SSE技术介绍
前端·javascript
yinke小琪1 小时前
JavaScript DOM节点操作(增删改)常用方法
前端·javascript
枣把儿1 小时前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
望获linux1 小时前
【Linux基础知识系列】第四十三篇 - 基础正则表达式与 grep/sed
linux·运维·服务器·开发语言·前端·操作系统·嵌入式软件
爱编程的喵1 小时前
从XMLHttpRequest到Fetch:前端异步请求的演进之路
前端·javascript