Last active
May 29, 2019 06:16
-
-
Save artlili/295192749f21e6e727e69edb29ca2bd0 to your computer and use it in GitHub Desktop.
axios
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var vm = new Vue ({ | |
el: '#app', | |
data: { | |
result: '' | |
}, | |
created: function(){ | |
this.getResult(); | |
}, | |
methods: { | |
deleteData: function(result, id) { | |
axios.delete('https://my-json-server.typicode.com/json/posts/' + result.id) | |
.then(response => { | |
this.result.splice(id, 1) | |
console.log(this.result); | |
}); | |
}, | |
getResult: function() { | |
// this.results = 'Loading...'; | |
axios.get('https://my-json-server.typicode.com/json/db') | |
.then(response => { | |
// console.log(response.data); | |
this.result = response.data.posts; | |
console.log(this.result); | |
}); | |
} | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<ul v-if="posts && posts.length"> | |
<li v-for="post of posts"> | |
<p><strong>{{post.title}}</strong></p> | |
<p>{{post.body}}</p> | |
</li> | |
</ul> | |
<ul v-if="errors && errors.length"> | |
<li v-for="error of errors"> | |
{{error.message}} | |
</li> | |
</ul> | |
</template> | |
<script> | |
import axios from 'axios'; | |
export default { | |
data() { | |
return { | |
posts: [], | |
errors: [] | |
} | |
}, | |
// Fetches posts when the component is created. | |
created() { | |
axios.get(`http://jsonplaceholder.typicode.com/posts`) | |
.then(response => { | |
// JSON responses are automatically parsed. | |
this.posts = response.data | |
}) | |
.catch(e => { | |
this.errors.push(e) | |
}) | |
// async / await version (created() becomes async created()) | |
// | |
// try { | |
// const response = await axios.get(`http://jsonplaceholder.typicode.com/posts`) | |
// this.posts = response.data | |
// } catch (e) { | |
// this.errors.push(e) | |
// } | |
} | |
} | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import axios from 'axios'; | |
export const HTTP = axios.create({ | |
baseURL: `http://jsonplaceholder.typicode.com/`, | |
headers: { | |
Authorization: 'Bearer {token}' | |
} | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
import {HTTP} from './http-common'; | |
export default { | |
data() { | |
return { | |
posts: [], | |
errors: [] | |
} | |
}, | |
created() { | |
HTTP.get(`posts`) | |
.then(response => { | |
this.posts = response.data | |
}) | |
.catch(e => { | |
this.errors.push(e) | |
}) | |
} | |
} | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
axios.post('/save', { firstName: 'Marlon', lastName: 'Bernardes' }) | |
.then(function(response){ | |
console.log('saved successfully') | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
axios.put('https://example.com/cats/1', { | |
name: 'Catsandra', | |
image: 'https://example.com/images/catsandra.jpg', | |
description: 'Catsandra is the fanciest cat in town!' | |
}) | |
.then(response => { | |
console.log(response); | |
}) | |
.catch(error => { | |
console.log(err); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<input type="text" v-model="postBody" @change="postPost()"/> | |
<ul v-if="errors && errors.length"> | |
<li v-for="error of errors"> | |
{{error.message}} | |
</li> | |
</ul> | |
</template> | |
<script> | |
import axios from 'axios'; | |
export default { | |
data() { | |
return { | |
postBody: '', | |
errors: [] | |
} | |
}, | |
// Pushes posts to the server when called. | |
postPost() { | |
axios.post(`http://jsonplaceholder.typicode.com/posts`, { | |
body: this.postBody | |
}) | |
.then(response => {}) | |
.catch(e => { | |
this.errors.push(e) | |
}) | |
// async / await version (postPost() becomes async postPost()) | |
// | |
// try { | |
// await axios.post(`http://jsonplaceholder.typicode.com/posts`, { | |
// body: this.postBody | |
// }) | |
// } catch (e) { | |
// this.errors.push(e) | |
// } | |
} | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment