Home  >  Q&A  >  body text

javascript - Multiple axios requests at the same time, the data is overwritten by the previous request, how to solve it?

Multiple axios requests at the same time, the data is overwritten by the previous request, how to solve it?
It can be solved with axios.all, but it is not convenient to add an all method every time.
axios configuration

import axios from 'axios'
import store from '../vuex/'
import { Notification } from 'element-ui'
// import router from '../routers'
// axios 配置
axios.defaults.timeout = 10000
axios.defaults.baseURL = '/api/'
// http request 拦截器
axios.interceptors.request.use(config => {
  if (store.state.token) {}
  return config
}, err => {
  return Promise.reject(err)
})

// 后台无返回success因此修改之前的拦截器规则,直接返回数据
// http response 拦截器
axios.interceptors.response.use(response => {
  console.log(response)
  if (response.data.status === 200 || response.data.code === 200) {
    return response.data.data
  } else {
    Notification.error(response.statusText)
    return response.data
    // return Promise.reject(response.statusText)
  }
})
export default axios

api configuration (there are several APIs as follows, not all posted)

// 1. 产品系列 :: 列表
export const getProductType = params => {
  return axios.get(`/product/type/list`, params)
}

Calling vuex in the page

  store.dispatch('getProductStatus')
  store.dispatch('getProductStyle')
  store.dispatch('getProductType')

vuex configuration

import {getProductStyle, getProductStatus, getProductType} from '@/http/api'
const state = {
  panelIsShow: false,
  dict: {
    statusDict: [],
    styleDict: [],
    typeDic: []
  }
}
const mutations = {
  SET_PANEL_SHOW (state, data) {
    state.panelIsShow = data
  },
    // 获取产品募集状态字典
  GET_DICT_STATUS (state, dict) {
    state.dict.statusDict = dict
  },
  // 获取产品风格字典
  GET_DICT_STYLE (state, dict) {
    state.dict.styleDict = dict
  },
  // 获取产品系列字典
  GET_DICT_TYPE (state, dict) {
    state.dict.typeDict = dict
  }
}
const actions = {
  // 产品风格
  async getProductStyle ({commit}) {
    let data = await getProductStyle()
    commit('GET_DICT_STYLE', data)
  },
  // 产品募集状态
  async getProductStatus ({commit}) {
    let data = await getProductStatus()
    commit('GET_DICT_STATUS', data)
  },
  // 产品系列
  async getProductType ({commit}) {
    let data = await getProductType()
    commit('GET_DICT_TYPE', data)
  }
}
const getters = {
  panelIsShow: state => state.panelIsShow,
  dict: (state) => state.dict
}
export default {
  state,
  getters,
  actions,
  mutations
}
大家讲道理大家讲道理2663 days ago1314

reply all(2)I'll reply

  • 滿天的星座

    滿天的星座2017-07-05 11:07:31

    No way.

    Post the code.

    This way of writing will definitely be covered

    reply
    0
  • 怪我咯

    怪我咯2017-07-05 11:07:31

    If you don’t use the all method, of course you cannot guarantee the order, and the data will of course be overwritten.

    reply
    0
  • Cancelreply