npm 包 @suddenly/api 使用教程

什么是 @suddenly/api？

@suddenly/api 是一个轻量级的前端 API 请求库，支持 Promise 和 async/await 特性，具有良好的拓展性和可定制性。它可以让你快速方便地向后端服务器请求数据。

安装

使用 npm 安装：

npm install @suddenly/api

使用方法

首先需要引入该库：

import api from '@suddenly/api';

请求数据

使用该库可以向后端服务器请求数据，有如下两种方式：

1. 使用 Promise：

api.get('/api/userinfo')
  .then(res => {
    console.log(res.data);
  })
  .catch(error => {
    console.log(error);
  });

1. 使用 async/await：

async function fetchData() {
  try {
    const result = await api.post('/api/newUser', { name: 'John' });
    console.log(result.data);
  } catch (error) {
    console.log(error);
  }
}

自定义配置

使用该库还可以自定义配置，包括：

1. 基础URL

api.defaults.baseURL = 'http://localhost:8080';

1. 头部信息

api.defaults.headers.common['Authorization'] = 'Bearer ' + token;

错误处理

该库已经预置了错误处理，可以直接使用 catch 方法来处理异常。

-- -------------------- ---- -------
------------------------
  --------- -- -
    ----------------------
  --
  ------------ -- -
    -- ---------------- -
      -- ---------- --- ---
      ---------------------------------
      -----------------------------------
      ------------------------------------
    - ---- -- --------------- -
      -- ------
      ---------------------------
    - ---- -
      -- ------
      ------------------- ---------------
    -
  ---

示例代码

请求数据

api.get('/api/userinfo')
  .then(res => {
    console.log(res.data);
  })
  .catch(error => {
    console.log(error);
  });

自定义配置

api.defaults.baseURL = 'http://localhost:8080';

api.defaults.headers.common['Authorization'] = 'Bearer ' + token;

错误处理

-- -------------------- ---- -------
------------------------
  --------- -- -
    ----------------------
  --
  ------------ -- -
    -- ---------------- -
      ---------------------------------
      -----------------------------------
      ------------------------------------
    - ---- -- --------------- -
      ---------------------------
    - ---- -
      ------------------- ---------------
    -
  ---

总结

@suddenly/api 是一个非常方便实用的前端 API 请求库，使用简单，支持自定义配置和错误处理，是开发者撰写复杂应用程序的好选择。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673ddfb81d47349e53b82