小编Uts*_*tel的帖子

Vuex:如何等待动作完成?

我想实现一个登录方法。我的代码是:

login() {
  let user = {
    email: this.email,
    password: this.password
  };

  this.$store.dispatch('auth/login', user)
  console.log(this.$store.getters['auth/getAuthError'])
},
Run Code Online (Sandbox Code Playgroud)

我到达商店并发送登录操作的地方。

商店中的操作如下所示:

login(vuexContext, user) {
        return axios.post('http://localhost:8000/api/user/login', user)
        .then(res => {
            vuexContext.commit('setToken', res.data.token)
            vuexContext.commit('setUser', res.data, {root: true})
            localStorage.setItem('token', res.data.token)
            Cookie.set('token', res.data.token )
            this.$router.push('/')
        }).catch(err => {
            vuexContext.commit('setAuthError', err.response.data)
        })
    },
Run Code Online (Sandbox Code Playgroud)

在 catch 块中,如果发生错误,我会更新状态并将authError属性设置为我得到的错误。

我的问题是,在登录方法中,该console.log语句在动作实际完成之前执行,因此authError属性是尚未设置的状态。如何解决这个问题?

vue.js vuex

9
推荐指数
1
解决办法
6840
查看次数

通过router将数据传递给vue中的其他组件

我正在尝试通过路由器传递数据。我的代码可以工作,但它显示 url 中的数据。我不希望像 POST 方法那样。url 应该像 /data-list。我还想捕获从组件传递的值。这里我没有使用 vuex 。实际上,我的工作是显示任务已根据此数据完成的消息。我使用 Laravel 作为后端。提前致谢

第一个组件

axios.post("/request/data", dataform).then(function (resp) {
  app.$router.push({ path: "/data-list/" + resp.data.success });
});
Run Code Online (Sandbox Code Playgroud)

路线

{
  path: '/data-list/:message?',
  name: 'dataList',
  component: dataList,
  meta: {
      auth: true
  }
},
Run Code Online (Sandbox Code Playgroud)

另一个组件。在这里我想抓住

mounted() {
  var app = this;
  app.message = app.$route.params.message;
}
Run Code Online (Sandbox Code Playgroud)

vue.js vue-component vuejs2

8
推荐指数
2
解决办法
3万
查看次数

React.js:尽管 http 响应 400,但仍收到错误消息

我有一个场景,如果我在数据库中保存重复记录,模式应该显示确切的错误消息

使用 axios 的 POST 请求:

    saveBankMaintenance(optionsBrstn){
        return axios.post(`${API_URL_SAVE_BANK_MAINTENANCE}`, 
            [optionsBrstn]
    )
Run Code Online (Sandbox Code Playgroud)

我使用以下方式调用此 POST 请求:

const saveBrstn = useCallback(() => {
    ClientMaintenanceService.saveBankMaintenance(optionsBrstn)
    .then((response) => {
      if(response.data.success === "Success"){
        setShowBrstnSaveSuccessModal(true);
        setShowBrstnSaveFailedModal(false);
      }
    }).catch((err) => {
        setShowBrstnSaveSuccessModal(false);
        setShowBrstnSaveFailedModal(true);
    })
  });
Run Code Online (Sandbox Code Playgroud)

保存成功就OK了

但是,当它失败时,它会直接进入catch块,我无法在状态上设置错误消息

有没有办法让我获得 json 响应(包含错误消息)以及 http 状态响应 400?

TIA

post reactjs

5
推荐指数
1
解决办法
9988
查看次数

如何在 React Native 中播放 Lottie 动画片段(.json 文件)

我只想使用 Lottie View 在 React Native 中播放动画的一部分,长度约为 5 秒,而速度= {1} 我只想播放前 3 秒,然后转到下一个屏幕,代码如下

徽标屏幕.js:

import React from 'react';
import { StyleSheet, View, Image, TextInput, StatusBar, Text } from "react-native";
import Icons from 'react-native-vector-icons/Ionicons';
import LottieView from "lottie-react-native";

export default class ChatScreen extends React.Component {

  onAnimationFinish = () => {
    this.props.navigation.navigate("Login")
  }
  render () {
    return (
      <View style={styles.container}>
        <StatusBar barStyle="light-content" backgroundColor="#161f3d" />
        <View>
          <LottieView
            source={require('../assets/animations/lottie/MotionCorpse-Jrcanest.json')}
            style={{ justifyContent: "center", alignSelf: "center", height: "100%", width: "100%" }}
            autoPlay
            loop={false}
            speed={1}
            onAnimationFinish={this.onAnimationFinish}
          /> …
Run Code Online (Sandbox Code Playgroud)

reactjs react-native react-native-ios lottie

4
推荐指数
1
解决办法
6241
查看次数

useEffect 中取消 axios 请求未运行

我正在尝试取消 axios 请求,但只取得了部分成功。当我发出 GET 请求时,我有一个返回 Promise 的函数:

const getCards = (token) => {
  const URL = isDev
    ? "https://cors-anywhere.herokuapp.com/https://privacy.com/api/v1/card"
    : "https://privacy.com/api/v1/card";
  const config = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
    cancelToken: source.token,
  };

  return axios.get(URL, config);
};
Run Code Online (Sandbox Code Playgroud)

我在里面调用这个函数updateCards(),如下所示:

const updateCards = async () => {
  console.log("Updating Cards");

  setCards([]);
  setStarted(true);
  setLoading(true);

  let response = await getCards(token).catch((thrown) => {
    if (axios.isCancel(thrown)) {
      console.error("[UpdateCards]", thrown.message);
    }
  });

  /**
   * response is undefined when we cancel the request on unmount
   */ …
Run Code Online (Sandbox Code Playgroud)

reactjs axios react-hooks

3
推荐指数
1
解决办法
2732
查看次数