前端问题记录

Posted on Edited on In , ,

关于async使用失败的问题

记录一个async使用axios的问题

简单描述就是要使用async，必须是promise对象，要把一般函数转过去。

问题描述：

react项目中，在使用axios时，我要写一个登录功能：要求在请求接口后跳转到首页，但是要在请求成功到token后才执行跳转，于是用到了async的await。

代码如下：

1
2
3
4
5
6
7
8
9
const onFinish = async (values) =>  {
  //一个固定的读取表单的函数
  console.log( values);
  // 触发请求
  await dispatch(fetchLogin(values))
  // 登录成功后跳转首页，并提示用户（避免异步）
  navigator('/') 
  message.success('登录成功')
}

问题就在于await无法触发

调用的函数如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const fetchLogin = (loginForm) => {
  /*
  @Description: 异步请求获取token,并返回应该promise函数
  */
  const { username, password } = loginForm;
  const requestData = {
    grant_type: "",
    username,
    password,
    scope: "",
    client_id: "",
    client_secret: "",
  };
  return (dispatch) => {
    //分布异步请求，并存入
    const res = request({
        url: '/token',
        method: 'POST',
        data: formData,
        headers: {
          'accept': "application/json",
          "Content-Type": "application/x-www-form-urlencoded",
        },
      })
    dispatch(setToken(res.data.access_token));
  };
};

解决

通过查找资料后，了解到async必须传入promise才能使用await,但查资料都说dispatch函数调用后都是promise对象（网上资料真的是），后面就尝试改为异步函数试试。（先在return后加入了async）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const fetchLogin = (loginForm) => {
  /*
  @Description: 异步请求获取token,并返回应该promise函数
  */
  const { username, password } = loginForm;
  const requestData = {
    grant_type: "",
    username,
    password,
    scope: "",
    client_id: "",
    client_secret: "",
  };
  return async (dispatch) => {
    //分布异步请求，并存入
    const res = request({
        url: '/token',
        method: 'POST',
        data: formData,
        headers: {
          'accept': "application/json",
          "Content-Type": "application/x-www-form-urlencoded",
        },
      })
    dispatch(setToken(res.data.access_token));
  };
};

这是一次试错，发现无效，后面在request前加入await才成功

正确函数是（封装了一下）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
const fetchLogin = (loginForm) => {
  /*
  @Description: 异步请求获取token,并返回应该promise函数
  */
  const { username, password } = loginForm;
  const requestData = {
    grant_type: "",
    username,
    password,
    scope: "",
    client_id: "",
    client_secret: "",
  };
  return async (dispatch) => {
    //分布异步请求，并存入
    const res = await loginAPI(requestData);
    dispatch(setToken(res.data.access_token));
  };
};

function loginAPI (formData){
    return request({
        url: '/token',
        method: 'POST',
        data: formData,
        headers: {
          'accept': "application/json",
          "Content-Type": "application/x-www-form-urlencoded",
        },
      });

如此就成功了。