admin管理员组文章数量:1323684
I was asked to make API call to send data.
On Click in vue, I was firing this event
async facebookDataToSend () {
let campaignID = await this.$store.getters['CurrentInstance/id']
this.$axios.post(process.env.API_BASE_URL + 'faceeBookCampaign', { campaignID: campaignID }, { withCredentials: true })
},
But then, I was told to use API functions which already exsist in some xyz.js file.
My xyz.js file looks like this..
const rest = {
something: axios.create({
baseURL: process.env.API_BASE_URL,
withCredentials: true
}),
setClient: function (client) {
this.something = axios.create({
baseURL: process.env.API_BASE_URL,
withCredentials: true,
params: {
__somethingClient: client
}
})
this.client = client
}
}
Here, I am unable to prehend how can I use this instance to make an api call So I viewed the code where they have already made the api call and saw something like this
const API = {
url: '/whateverHtml/',
method: 'post',
withCredentials: true,
data: {
'schemaType': 'something-event', // TODO FIXME
'field': 'description', // TODO FIXME
'html': this.model[this.field.key]
}
api.something.request(API).then(result => {
And I wasn't able to prehend the code. For starters
What is request? I don't see my any method or property inside something
in my rest
variable
second why are they using withCredentials: true
in their API
object when they have already set up the property as true in rest
object]
What are the pro's of using axios.create({
i.e what they are doing than what I initially did this.$axios.post(
I was asked to make API call to send data.
On Click in vue, I was firing this event
async facebookDataToSend () {
let campaignID = await this.$store.getters['CurrentInstance/id']
this.$axios.post(process.env.API_BASE_URL + 'faceeBookCampaign', { campaignID: campaignID }, { withCredentials: true })
},
But then, I was told to use API functions which already exsist in some xyz.js file.
My xyz.js file looks like this..
const rest = {
something: axios.create({
baseURL: process.env.API_BASE_URL,
withCredentials: true
}),
setClient: function (client) {
this.something = axios.create({
baseURL: process.env.API_BASE_URL,
withCredentials: true,
params: {
__somethingClient: client
}
})
this.client = client
}
}
Here, I am unable to prehend how can I use this instance to make an api call So I viewed the code where they have already made the api call and saw something like this
const API = {
url: '/whateverHtml/',
method: 'post',
withCredentials: true,
data: {
'schemaType': 'something-event', // TODO FIXME
'field': 'description', // TODO FIXME
'html': this.model[this.field.key]
}
api.something.request(API).then(result => {
And I wasn't able to prehend the code. For starters
What is request? I don't see my any method or property inside something
in my rest
variable
second why are they using withCredentials: true
in their API
object when they have already set up the property as true in rest
object]
What are the pro's of using axios.create({
i.e what they are doing than what I initially did this.$axios.post(
2 Answers
Reset to default 3request
is a method defined by axios
. Link to docs.
request
allows you to make an HTTP call with any verb you want (POST, GET, DELETE, PUT). Most likely axios calls request
from inside all the other helper methods (get
, post
), but this is an implementation details. One of the advantages of using request
is that you don't have to hardcode the HTTP verb (POST, GET ...) and you can set it at run time depending on your input.
I see 2 reasons why they would set withCredentials
:
setClient
may or may not be called beforesomething
- for clarity: it's enough to look at the definition of
something
to realise that the client is using credentials and you don't need any extra information about howrest
works.
I don't think the request for you to use something
boils down to advantages of axios.$post
vs axios.create
. It's probably related more to how to organise your code.
Some advantages of using a separate module vs calling axios
directly
- when calling axios directly you are prepending base url all the time, when using a module for your REST API the base URL is tucked away and arguably makes your code easier to read
- you can bake other options inside config and make sure they are used. For instance you may have an access token, the module can store that token and always added to any request. When calling axios by hand you need to remember this
- you are decoupled from axios (to some degree)(1). When using a module you don't actually care if it's axios doing the requests or not.
- You can add more API calls to the module that you can reuse in the future. I'm expecting
xyz
file to grow in time and your call tofaceeBookCampaign
to end up being a method on therest
variable. It makes more sense to end up usingthis.client
and notsomething
but this is up to the devs. - it keeps all the REST API calls in one place allowing you to build an SDK for that API, which as the project grows can have its own life cycle.
(1) I say that id decouples you to some degree because there are semantics that need to be kept so everything works. The returned object needs to have a request method that accepts a config object. The config need to conform to the same structure as the one that axios wants. But, you can always write an adapter for that, so you are actually decoupled from axios.
request
here takes a config and returns a promise. I am guessing this approach is usually taken when you want to reuse a request object that is created using create
(at least my sense).
I feel the request
method is used to overwrite the initial configuration with new one defined in API
. And, the double withCredentials
should be an oversight.
OR, because API is defining a new config object, therefore when defined without withCredentials
, it would overwrite the create
's configuration.
Hence, it looks like its specified twice.
本文标签: javascriptUnderstanding what does Axios create doStack Overflow
版权声明:本文标题:javascript - Understanding what does Axios create do - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742138046a2422457.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论