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

向右看齐 2024-03-23 21:55 70阅读 0赞

#### 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的使用 ##

通过使用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);
    })