获取 Open Weather API（地理位置）时出现错误 400 错误请求

Question

I want to get the weather API to display the current location but it gives back an 400 error. I don't know how to fix it. (I open my api on browser and its works fine. But when I put it in the code bellow, it's gave error)

state: {
        weather:{},
        api_key: 'c9f562aaffcdefaf40f2ed808d202c9b',
        url_base: 'https://api.openweathermap.org/data/2.5/',
        query: '',
        icons: {
            'Rain': require('../assets/regnerisch.png'),
            'Clear': require('../assets/sonne.png'),
            'Clouds': require('../assets/wolkig.png'),
            'Snow': require('../assets/schnee.png'),
            'Drizzle':require('../assets/regnerisch.png'),
            'Thunderstorm':require('../assets/regnerisch.png')
        },          
    },

 actions:{
         currentCity({commit}) {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(position => {
                axios
                .get(`${this.url_base}weather?&lat=${position.coords.latitude}&lon=${position.coords.longitude}&units=metric&APPID=${this.api_key}`)
                .then(res=>res.data)
                .then(weather=>{
                    commit('currentCity',weather)
                })            
            })
        }
    }
},
     mutations:{
         currentCity (state, weather){
             state.weather = weather
         }
     }

Answer 1

400 error means your request was malformed. Since all of your payload data is storedas a query string I assume your url is wrong, Is this part below meant to be backticked? ${this.url_base}weather?&lat=${position.coords.latitude}&lon=${position.coords.longitude}&units=metric&APPID=${this.api_key} ? Is yes then consider logging the variables to make sure you're getting valid input to the query string

Answer 2

You are using undefined variables inside axios call that is why its giving 400 bad request because of wrong url. Working code in GitHub repo after cleaning up home and temperature components. https://github.com/manojkmishra/weather_app_vuex_test
demo- https://weather-app-vuex-test.netlify.app/

Modify store.js as below

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex);
export default new Vuex.Store({
state: { weather:{},    },
 actions:{
    async currentCity ({commit}, position)
    {   let url_base= 'https://api.openweathermap.org/data/2.5/';
        let api_key= 'c9f562aaffcdefaf40f2ed808d202c9b';
        console.log('store-pos',position,url_base,api_key)
        let res=await axios.get(`${url_base}weather?&lat=${position.coords.latitude}&
        lon=${position.coords.longitude}&units=metric&APPID=${api_key}`)
            commit('CUR_CITY',res.data)
        return res;
    },

 },
 mutations:{
     CUR_CITY (state, weather)
     {   console.log('store-muta-state=',state)
         state.weather = weather

     }
 },
  getters:{}
})

modify home.js as below, cleanup your home.vue to test for only one component for eg-temperature and remove all others to check if everything is working.

import 'chartjs-plugin-datalabels';
import Temperature from '../temperature/Temperature.vue';
import { mapState} from 'vuex';
import '../../custom.scss';

export default {
computed: 
{  ...mapState({ weather: state => state.weather, 
                }),
},
components: {Temperature},
mounted() {
    navigator.geolocation.getCurrentPosition((position) => 
    {
        this.$store.dispatch('currentCity', position)
    });
},
};