使用RailsRanger在JavaScript客户端中访问RailsAPI

Rails Ranger 是我编写的一个库，它专注于利用 Ruby on Rails API 的默认设置，让您在为它们编写 javascript 客户端时更轻松。它本质上是一个包裹强大的 Axios 库的薄层，同时仍为您展示其全部功能。

安装

$ yarn add rails-ranger

# or
$ npm install —-save rails-ranger

基本设置

最基本的设置是这样的：

api-client.js

import RailsRanger from 'rails-ranger'

const config = {
  axios: { baseURL: 'http://api.myapp.com' }
}

export default new RailsRanger(config)

这里的一个重要注意事项是，您在 axios 选项中发送的任何内容都将按原样传递给 Axios，因此您可以根据需要对其进行配置。

用法

那么我们如何开始提出请求呢？像这样：

一些前端组件.js

import api from 'api-client'

api.list('users').then((response) => {
  // your code
})

所以让我们分解这里发生的事情：

我们导入我们在配置部分中看到的上一个文件中设置的客户端。
我们从中调用 list 函数，它只是 index 的别名。这将触发对 http://api.myapp.com/users URL 的请求。
我们在 response.data 中收到的 JSON 将自动为您将其所有密钥转换为蛇盒！

此外，您可以通过以下方式使用嵌套资源：

api.resource(users, 1)
   .list('blogPosts', { hideDrafts: true })
   .then((response) => {
  // your code
})

这将要求：

http://api.myapp.com/users/1/blog_posts&hide_drafts=true

请注意，Rails Ranger 将您的资源和参数从驼峰式转换为蛇式，因此您的应用程序的每个部分（客户端和 API）都可以使用其首选标准进行通信。

大家都很开心！ 🎉

奖励：使用 Rails Ranger 作为路径构建器

您还可以将 Rails Ranger 用作路径构建器，并使用您喜欢的客户端自己处理请求：

import { RouteBuilder } from RailsRanger
const routes = new RouteBuilder

route = routes.create('users', { name: 'John' })
// => { path: '/users', params: { name: 'John' }, method: 'post' }

如果我们利用完善的框架标准，向 Ruby on Rails API 发出 AJAX 请求会很有趣。

通过这种方式，我们可以从处理重复性任务中解放出来，例如在驼峰式和蛇式之间进行转换，并专注于以语义方式访问端点。 🤠

使用RailsRanger在JavaScript客户端中访问RailsAPI

目录

安装

基本设置

用法

更多功能

奖励：使用 Rails Ranger 作为路径构建器