What is the best way I wrap axios in adonis?

[positivedeveloper36]

My code in controller like this :

import axios from 'axios'

export default class Mycontroller {
  
  public async handleFileUpload(request) {
    const formData = new FormData()
    .....
    formData.append('uploader', '...')

    return axios
      .post('https://api-example.com', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      })
      .then((response) => {
        console.log(response)
      })
      .catch((error) => {
        console.log(error.response)
      })
  }
}

I use axios directly for requests in the controller like that. Whether in adonis we can create an index file to wrapping axios. So we don't call axios directly in the controller. So there is one global file to make a request. So it looks more clean and tidy

Please help me. Thanks

[Julien-R44]

Just make a basic class with static methods like this :

import axios from 'axios'

export class MyApi {
  private static readonly BASE_URL = 'https://my-api.com'
  private static client = axios.create({ baseURL: MyApi.BASE_URL })

  public static async getProduct(productId: string) {
    const { data } = await this.client.get(`/product/${productId}`)
    return data
  }

  // Other methods ...
}

And use it in your controller like that :

import { MyApi } from '@/services/MyApi'

export default class Mycontroller {
  public async handleFileUpload(request) {
    const product = await MyApi.getProduct(request.param('id'))
    
    // ...
  }
}

[positivedeveloper36]

Okay thanks. I will try it first

[positivedeveloper36]

@Julien-R44 Is there any other way besides using the service? I have used service to save my query. So for axios request, I want to move it to another place. So it looks more clean code

[RomainLanz]

Could you give us more information/examples then?

You can do basically whatever JavaScript allows you to do.