taro 中使用 axios 导致路由失效

本文最后更新于：2021年12月20日 晚上

  1. 开发环境：

    taro 3.3.8

    vue 3.2.26

    axios 0.21.4

    node 14.17.6

  2. 场景复现：

    request.js

    1
    2
    3
    4
    5
    6
    import axios from 'axios'

    const request = axios.create({
        baseURL: "/api",
        timeout: 5000
    })

    login.vue

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    import request from "../../utils/request.js"

    request.post("/user/login", postdata).then(res => {
    	if (res.code === 200) {
    		this.$message({
    		type: "success",
    		message: "登录成功!"
    		})
    		Taro.navigateTo({url:'/pages/home/home'}) //登录成功之后进行页面的跳转，跳转到主页
         } else {
    		this.$message({
    		type: "error",
    		message: "登录失败！"
    		})
    	}
    })

​ 这种情况下，当发起 request 请求时，能够正常与后端进行数据交互，但是Taro.navigateTo({url:’/pages/home/home’}) 并不能生效，页面还会停留在原来的页面，也不会有任何报错。

  1. 解决方案

    使用 Taro.request() 发起请求， Taro 框架的此 api 不会产生上述 bug，可以成功进行页面间的路由。需要注意的是，使用 Taro 的此 api 时，从后端返回的响应数据是完整的 http 请求的相应体，同样需要自行处理。