如何用Vus.js实现Axios

Question

如何实现Axios?我看了文档，但仍然不清楚，提前谢谢你，与天气站点的API请求有关，我认为

我只包括脚本部分，我希望这将是足够的。我的问题不是调试，而是如何使用axios简单地替换请求部分。

<script>
export default {
name: 'app',
data() {
return {
api_key: 'f401be24a6ae97c3177533197510126c',
url_base: 'https://api.openweathermap.org/data/2.5/',
query: '',
weather: {}
}
},
methods: {
fetchWeather(e) {
if (e.key == "Enter") {
fetch(`${this.url_base}weather?q=${this.query}&units=metric&APPID=${this.api_key}`)
.then(res => {
return res.json();
}).then(this.setResults);
}
},
setResults(results) {
this.weather = results;
},
dateCreator() {
let dates = new Date();
let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
let day = days[dates.getDay()];
let date = dates.getDate();
let month = months[dates.getMonth()];
let year = dates.getFullYear();
return `${day} ${date} ${month} ${year}`;
}
}
}
</script>

Answer 1

试试下面的代码片段:

new Vue({
el: '#app',
data(){
return {
api_key :'f401be24a6ae97c3177533197510126c',
url_base: 'https://api.openweathermap.org/data/2.5/',
query:'',
weather:{}
}
},
methods: {
async fetchWeather () {
//if (e.key == "Enter") {
await axios(`${this.url_base}weather?q=${this.query}&units=metric&APPID=${this.api_key}`)
.then(res => this.weather = res.data);
//}
},
dateCreator () {
let dates = new Date();
let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
let day = days[dates.getDay()];
let date = dates.getDate();
let month = months[dates.getMonth()];
let year = dates.getFullYear();
return `${day} ${date} ${month} ${year}`;
}
},
mounted() {
if(this.query) this.fetchWeather()
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.22.0/axios.min.js" integrity="sha512-m2ssMAtdCEYGWXQ8hXVG4Q39uKYtbfaJL5QMTbhl2kc6vYyubrKHhr6aLLXW4ITeXSywQLn1AhsAaqrJl8Acfg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="app">
<label>City name</label>
<input v-model="query" />
<button @click.prevent="fetchWeather">Show weather<button>
<p>{{ weather }}</p>
</div>