Create AxiosSearch.kt

[ScottHuangZL]

An example to show how to leverage axios lib to fetch remote data by [email protected] ([email protected])
(Btw, Vue.js formally leverage axios for ajax related works, so it should be good if React.js also use it)

It will be helpful for people to use axios lib to make their static data web to live/real data web, thanks.

Date: Nov 25, 2017

[Hypnosphi]

React is a rendering library not a framework, so working with network is out of its scope

[ScottHuangZL]

Yeah, agree.
But better add axios example into kotlin-react for people to exchange remote data :)

[Hypnosphi]

Let's use commonjs instead:

@JsModule("axios")

[ScottHuangZL]

Thanks for your advise!

[Hypnosphi]

Let's extract it into a component method

[ScottHuangZL]

Ok, please. You can direct change it. Thanks.

[Hypnosphi]

We can add some basic typing right in the example:

external interface AxiosConfig {
  var url: String
  var timeout: Number
}

// T is the type of response data
external interface AxiosResponse<T> {
  data: T
}

@JsModule("axios")
external fun axios<T>(config: AxiosConfig): Promise<T>

[Hypnosphi]

You can now use jsObject, which is type-safe

In fact, js is just a shortcut for jsObject<dynamic>

[ScottHuangZL]

Thanks for the great advice. Have change in code:)

[Hypnosphi]

Would you like to add typings for response data as well?

[ScottHuangZL]

Done to add typing both for axios response and error too.

After your review/comment, I get new skills:)

[Hypnosphi]

let's add an errorMessage field to state instead of misusing ZipResult data class

[ScottHuangZL]

Ok, will do.

[Hypnosphi]

Let's make axios return Promise<AxiosResponse> instead of `dynamic.

We can also make both AxiosResponse and axios a generic type so that data has the type of type parameter not dynamic:

external interface AxiosResponse<T> {
  // we can use `val` instead of `var` here because we never assign those values ourselves
  val data: T
  ...
}

@JsModule("axios")
external fun <T> axios(config: AxiosConfigSettings): Promise<AxiosResponse<T>>

Then you can add type for data:

external interface Data {
  val country: String
  val state: String,
  val city: String
}

and use axios like this:

// the type for `response` should be inferred authomatically
axios<Data>(config).then { response -> ... }.catch { error: AxiosError -> ... }

[ScottHuangZL]

I don't think it is a good idea to add more typing due to below reason:

1. The axios not only get response, but also have catch error branch.
   So, external fun axios(config: AxiosConfigSettings): Promise<AxiosResponse> not correct.

2. When I try hide/ignore catch branch firstly. The compile show below error:
   How to resolve it?
   Can you show example code? Thanks.

src\App\AxiosSearch\AxiosSearch.kt:92:29: error: no value passed for parameter 'onFulfilled'
axios(config).then { response ->
^
src\App\AxiosSearch\AxiosSearch.kt:94:48: error: unresolved reference: data
zipResult = ZipResult(response.data.country, response.data.state, response.data.city)
^
src\App\AxiosSearch\AxiosSearch.kt:94:71: error: unresolved reference: data
zipResult = ZipResult(response.data.country, response.data.state, response.data.city)
^
src\App\AxiosSearch\AxiosSearch.kt:94:92: error: unresolved reference: data
zipResult = ZipResult(response.data.country, response.data.state, response.data.city)
^
src\App\AxiosSearch\AxiosSearch.kt:96:34: error: unresolved reference: status
console.log(response.status)
^
src\App\AxiosSearch\AxiosSearch.kt:97:34: error: unresolved reference: statusText
console.log(response.statusText)

3. When I add back catch branch, it show below error:
   src\App\AxiosSearch\AxiosSearch.kt:102:18: error: type inference failed: fun catch(onRejected: (Throwable) -> S): Promise
   cannot be applied to
   ((AxiosError) -> Unit)

            .catch { error: AxiosError ->
             ^
   

src\App\AxiosSearch\AxiosSearch.kt:102:24: error: type mismatch: inferred type is (AxiosError) -> Unit but (Throwable) -> Unit was expected
.catch { error: AxiosError ->
^
src\App\AxiosSearch\AxiosSearch.kt:102:26: error: expected parameter of type Throwable
.catch { error: AxiosError ->

[Hypnosphi]

First, you have to put the { response -> ... } lambda in parens, because it's not actually the last argument of then:

axios<Data>(config).then({ response ->
  setState {
    zipResult = ZipResult(response.data.country, response.data.state, response.data.city)
    errorMessage = ""
  }
})

Second, the Promise builtin type in Kotlin expects the failure argument to be a Throwable. For this example it's OK, because we only use the message field:

.catch { error ->
  setState {
    zipResult = ZipResult("", "", "")
    // the Elvis operator is needed because `Throwable::message` is nullable
    errorMessage = error.message ?: ""
  }
}

[ScottHuangZL]

Add generic type for Axios, it finally works!
Thanks for @Hypnosphi 's professional advice, does learn something from this practice:)

[ScottHuangZL]

Thanks for approve the changes:) Will will merge into branch? Thanks.

[Hypnosphi]

Thanks @ScottHuangZL!