时间戳

首页 > 解决方案 > 使用 axios-mock-adapter 的路径参数在 Nuxt asyncData() 中请求失败，状态码为 404

vue.js - 使用 axios-mock-adapter 的路径参数在 Nuxt asyncData() 中请求失败，状态码为 404

问题描述

在 NuxtasyncData()中，我将 axios-mock-adapter 的路径参数与 Regex 一起使用，它会抛出错误。但是，当我在每件事中使用相同的东西时，mounted()一切正常。

错误详情如下

  Request failed with status code 404                                                                                                                                            09:36:11
at createAxiosError (node_modules\axios-mock-adapter\src\utils.js:151:15)
at Object.settle (node_modules\axios-mock-adapter\src\utils.js:142:12)
at handleRequest (node_modules\axios-mock-adapter\src\handle_request.js:127:15)
at node_modules\axios-mock-adapter\src\index.js:26:9
at new Promise (<anonymous>)
at MockAdapter.<anonymous> (node_modules\axios-mock-adapter\src\index.js:25:14)
at dispatchRequest (node_modules\axios\lib\core\dispatchRequest.js:53:10)
at async asyncData (pages/index.js:21:23)

用法

<script>
export default {
  async asyncData({ $axios }) {
    try {
      // throw error
      const respons = await $axios.$get("/users/123");
    } catch (err) {
      //  Request failed with status code 404     
      console.log(err);
    }
  },
  async mounted() {
    // work fine
    const respons = await this.$axios.$get("/users/123");
    console.log(respons); // text: "hello"
  },
};
</script>

你可以在 and 中看到相同的东西，asyncData但mounted结果却不同。

模拟 Axios 适配器设置

import MockAdapter from 'axios-mock-adapter'
import axios from 'axios'

let mockAdapter = new MockAdapter(axios);
  
// Using variables in regex
mockAdapter.onGet(new RegExp('/users/*')).reply(200, {
    text: 'hello'
});


export default {
  // ...
  ssr: true,
  plugins: ['~/plugins/mock.js'],
  modules: ['@nuxtjs/axios'], 
}

我的环境和包版本

node: v14.17.5
npm: 6.14.14
@nuxtjs/axios: 5.13.6
nuxt: 2.15.7
axios-mock-adapter: 1.20.0

调试到 axios-mock-adapter

我跟踪代码axios-mock-adapter并发现了问题。axios-mock-adapter\src\utils.js方法findHandler()不正确。

function findHandler(handlers, ...) {
  return find(handlers[method.toLowerCase()], function (handler) {
    // If I set this, everything work fine. why ?
    // handler[0] = /\/users\/*/;
  
    // SSR result: /\/users\/*/    
    // CSR result: //users/*/
    console.log(handler[0]);        
    
    // SSR result: false
    // CSR result: true
    console.log(handler[0] instanceof RegExp);
    
    if (typeof handler[0] === "string") {
      // ...
    } else if (handler[0] instanceof RegExp) {
      // ...
    }
  });
}

您可以看到 Nuxt SSR 中的 RegExp 翻译不正确。但如果你/\/users\/*/再次设置一切正常。有什么问题？这是一个错误吗？

标签： vue.jsaxiosnuxt.jsserver-side-renderingaxios-mock-adapter

解决方案

推荐阅读