javascript - Plusieurs requêtes Axios en même temps, les données sont écrasées par la requête précédente, comment résoudre ce problème?
大家讲道理
大家讲道理 2017-07-05 11:05:31
0
2
1330

Plusieurs requêtes axios en même temps, les données sont écrasées par la requête précédente, comment le résoudre ?
L'utilisation d'axios.all peut résoudre le problème, mais vous ne pouvez pas toujours ajouter une méthode all à chaque fois, ce qui n'est pas pratique
configuration axios

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

Configuration de l'API (il existe plusieurs API comme suit, pas toutes publiées)

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

Appelez vuex sur la page

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

configuration vuex

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
}
大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

répondre à tous(2)
滿天的星座

Pas question.

Publiez le code.

Cette façon d'écrire sera certainement couverte

刘奇

Si vous n'utilisez pas la méthode all, vous ne pouvez bien sûr pas garantir la commande et les données seront bien sûr écrasées.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!