axios interceptor sample code

http.js

/**
 * src/api/http.js
 */ 
import axios from 'axios'
import qs from 'qs'

/**
 *
 * parse error response
 */
function parseError (messages) {
  // error
  if (messages) {
    if (messages instanceof Array) {
      return Promise.reject({ messages: messages })
    } else {
      return Promise.reject({ messages: [messages] })
    }
  } else {
    return Promise.reject({ messages: ['エラーが発生しました'] })
  }
}

/**
 * parse response
 */
function parseBody (response) {
//  if (response.status === 200 && response.data.status.code === 200) { // - if use custom status code
  if (response.status === 200) {    
    return response.data.result
  } else {
    return this.parseError(response.data.messages)
  }
}

/**
 * axios instance
 */
let instance = axios.create({
  baseURL: `/your/host/api/v1`,
  paramsSerializer: function (params) {
    return qs.stringify(params, { indices: false })
  }
})

// request header
instance.interceptors.request.use((config) => {
  // Do something before request is sent

  // api tokenなどを利用してheaderに載せる場合
  // const apiToken = sessionStorage.getItem('token')
  // config.headers = { 'Custom-Header-IF-Exist': apiToken }
  return config
}, error => {
  return Promise.reject(error)
})

// response parse
instance.interceptors.response.use((response) => {
  return parseBody(response)
}, error => {
  console.warn('Error status', error.response.status)
  // return Promise.reject(error)
  if (error.response) {
    return parseError(error.response.data)
  } else {
    return Promise.reject(error)
  }
})

export const http = instance

text.js

/**
 * src/api/test.js
 */ 
import { http } from './http'

export default {

  find (query) {
    return http.get(`/test`, {
      params: query
    })
  },

  create (params) {
    return http.post(`/test`, { test: params })
  },

  update (params) {
    return http.put(`/test`, { test: params })
  }

}

owesome

good one

thanks

What if I want to send data to a 3rd part site on my current axios setup. I have an axios interceptor that is configured for my server. Can I bypass it or customize it in some way ?

@yohanelly95

What if I want to send data to a 3rd part site on my current axios setup. I have an axios interceptor that is configured for my server. Can I bypass it or customize it in some way ?

You can create another axios instance.
And define interceptors.

https://github.com/axios/axios#axioscreateconfig

let myInstance = axios.create({})
myInstance.interceptors  ...

let 3rdPartyInstance = axios.create({})
3rdPartyInstance.interceptors ...

You can write factory function that create axios instance for shared logic.

thank you so much~