介绍
@appt/api
是一个适用于前端开发的 npm 包,它提供了一套易用且优雅的 API,可实现在前端应用中进行服务器通信。
安装
要使用 @appt/api
,你需要先到你的项目目录下执行以下命令来安装该包:
npm install @appt/api
使用
使用 @appt/api
很简单:
-- -------------------- ---- ------- ------ - --- - ---- ------------ ----- --- - --- ----- -------- ------------------------- --- ----------------- -------------- -- - --------------------------- -- ------------ -- - --------------------- ---
在上述代码中,我们先引入了 @appt/api
并根据需要自定义了 baseURL
选项,接下来使用 get
方法向此 URL 发出 GET 请求,并在请求完成后执行了一个回调函数来处理响应数据或者错误。
可用方法
以下方法均可在 API
实例上调用。
get(url: string, config: object): Promise<Response>
发出一个 GET 请求并返回一个 Promise,你可以在 Promise 的 then
和 catch
方法中处理响应数据和错误。
可以传入一个可选的 config
参数,它会覆盖 API
实例上的配置。
这个方法同样支持在 url 上添加参数:
api.get('/users', { params: { per_page: 10, page: 1 } }) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); });
post(url: string, data: any, config: object): Promise<Response>
发出一个 POST 请求,附带数据,并返回一个 Promise。
可以传入一个可选的 config
参数,它会覆盖 API
实例上的配置。
api.post('/users', { name: 'Alice', email: 'alice@example.com' }) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); });
put(url: string, data: any, config: object): Promise<Response>
发出一个 PUT 请求,附带数据,并返回一个 Promise。
可以传入一个可选的 config
参数,它会覆盖 API
实例上的配置。
api.put('/users/1', { name: 'Bob', email: 'bob@example.com' }) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); });
delete(url: string, config: object): Promise<Response>
发出一个 DELETE 请求,并返回一个 Promise。
可以传入一个可选的 config
参数,它会覆盖 API
实例上的配置。
api.delete('/users/1') .then(response => { console.log(response.data); }) .catch(error => { console.error(error); });
可选配置
你可以在创建 API
实例时提供一些可选配置参数。
const api = new API({ baseURL: 'https://api.example.com', timeout: 10000, headers: { 'X-API-KEY': 'my-secret-key', }, });
baseURL
你的 API 的基础 URL,比如 https://api.example.com
。
timeout
超时时间,以毫秒为单位。
headers
一个对象,表示默认的请求头。可以在每个请求上覆盖。
总结
在本文中,我们介绍了 npm 包 @appt/api
,并且演示了如何在前端项目中使用该包实现服务器通信。我们提供了一些易用的方法和可选配置使得该包可以适用于大部分项目。希望这篇文章可以帮助你顺利使用 @appt/api
包。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/109905