在 nativescript-vue 项目上的 axios 导入时出现意外的令牌错误
Posted
技术标签:
【中文标题】在 nativescript-vue 项目上的 axios 导入时出现意外的令牌错误【英文标题】：Unexpected token error on axios import on a nativescript-vue project 【发布时间】：2020-02-18 10:22:49 【问题描述】：我有一个 nativescript 和 vue 项目，我正在尝试进行 axios 调用。
一旦我通过 npm 安装 axios 包并将其导入到我的项目中，tns run ios 命令就会出现以下错误：
Project successfully built.
The build result is located at: /Users/admin/Desktop/Sites/frontent/platforms/ios/build/Debug-iphonesimulator/frontendnative.app
Installing on device 4B430620-3B24-43CB-B743-705A8E9FB2D7...
Successfully installed on device with identifier '4B430620-3B24-43CB-B743-705A8E9FB2D7'.
Successfully transferred all files on device 4B430620-3B24-43CB-B743-705A8E9FB2D7.
Restarting application on device 4B430620-3B24-43CB-B743-705A8E9FB2D7...
Successfully synced application com.frontend on device 4B430620-3B24-43CB-B743-705A8E9FB2D7.
Successfully transferred bundle.64b9e6405a9a75fb778e.hot-update.js on device 4B430620-3B24-43CB-B743-705A8E9FB2D7.
Successfully transferred 64b9e6405a9a75fb778e.hot-update.json on device 4B430620-3B24-43CB-B743-705A8E9FB2D7.
***** Fatal javascript exception - application has been terminated. *****
Native stack trace:
1 0x10a60371a NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
2 0x10a64f14c -[TNSRuntime executeModule:referredBy:]
3 0x109f21713 main
4 0x7fff516ecd29 start
5 0x1
JavaScript stack trace:
file:///node_modules/debug/src/node.js:201:2
at promiseReactionJob([native code])
at require([native code])
at anonymous(file:///app/bundle.js:1:102)
at evaluate([native code])
at moduleEvaluation([native code])
at promiseReactionJob([native code])
JavaScript error:
file:///node_modules/debug/src/node.js:201:2: JS ERROR SyntaxError: Unexpected token ':'. Parse error.
(CoreFoundation) *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: SyntaxError: Unexpected token ':'. Parse error.
at
file:///node_modules/debug/src/node.js:201:2
at promiseReactionJob([native code])
at require([native code])
at anonymous(file:///app/bundle.js:1:102)
at evaluate([native code])
at moduleEvaluation([native code])
at promiseReactionJob([native code])
', reason: '(null)'
*** First throw call stack:
(
0 CoreFoundation 0x00007fff23baa1ee __exceptionPreprocess + 350
1 libobjc.A.dylib 0x00007fff50864b20 objc_exception_throw + 48
2 NativeScript 0x000000010a603bbf _ZN12NativeScript30reportFatalErrorBeforeShutdownEPN3JSC9ExecStateEPNS0_9ExceptionEb + 1455
3 NativeScript 0x000000010a64f14c -[TNSRuntime executeModule:referredBy:] + 668
4 frontendtest 0x0000000109f21713 main + 179
5 libdyld.dylib 0x00007fff516ecd29 start + 1
6 ??? <…>
NativeScript caught signal 6.
Native Stack:
1 0x10a64dcb1 sig_handler(int)
2 0x7fff518c9b1d _sigtramp
3 0x1
4 0x7fff517b9a3c abort
5 0x7fff4f6d27f8 __cxa_bad_cast
6 0x7fff4f6d29c7 demangling_unexpected_handler()
7 0x7fff50864d7c _objc_terminate()
8 0x7fff4f6dfe97 std::__terminate(void (*)())
9 0x7fff4f6df8fe __cxa_get_exception_ptr
10 0x7fff4f6df8c5 __cxxabiv1::exception_cleanup_func(_Unwind_Reason_Code, _Unwind_Exception*)
11 0x7fff50864c44 _objc_exception_destructor(void*)
12 0x10a603bbf NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
13 0x10a64f14c -[TNSRuntime executeModule:referredBy:]
14 0x109f21713 main
15 0x7fff516ecd29 start
16 0x1
JS Stack:
***** Fatal JavaScript exception - application has been terminated. *****
Native stack trace:
1 0x10dd6f71a NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
2 0x10ddbb14c -[TNSRuntime executeModule:referredBy:]
3 0x10d68d713 main
4 0x7fff516ecd29 start
5 0x1
JavaScript stack trace:
file:///node_modules/debug/src/node.js:201:2
at promiseReactionJob([native code])
at require([native code])
at anonymous(file:///app/bundle.js:1:102)
at evaluate([native code])
at moduleEvaluation([native code])
at promiseReactionJob([native code])
JavaScript error:
file:///node_modules/debug/src/node.js:201:2: JS ERROR SyntaxError: Unexpected token ':'. Parse error.
(CoreFoundation) *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: SyntaxError: Unexpected token ':'. Parse error.
at
file:///node_modules/debug/src/node.js:201:2
at promiseReactionJob([native code])
at require([native code])
at anonymous(file:///app/bundle.js:1:102)
at evaluate([native code])
at moduleEvaluation([native code])
at promiseReactionJob([native code])
', reason: '(null)'
*** First throw call stack:
(
0 CoreFoundation 0x00007fff23baa1ee __exceptionPreprocess + 350
1 libobjc.A.dylib 0x00007fff50864b20 objc_exception_throw + 48
2 NativeScript 0x000000010dd6fbbf _ZN12NativeScript30reportFatalErrorBeforeShutdownEPN3JSC9ExecStateEPNS0_9ExceptionEb + 1455
3 NativeScript 0x000000010ddbb14c -[TNSRuntime executeModule:referredBy:] + 668
4 frontendtest 0x000000010d68d713 main + 179
5 libdyld.dylib 0x00007fff516ecd29 start + 1
6 ??? <…>
NativeScript caught signal 6.
Native Stack:
1 0x10ddb9cb1 sig_handler(int)
2 0x7fff518c9b1d _sigtramp
3 0x1
4 0x7fff517b9a3c abort
5 0x7fff4f6d27f8 __cxa_bad_cast
6 0x7fff4f6d29c7 demangling_unexpected_handler()
7 0x7fff50864d7c _objc_terminate()
8 0x7fff4f6dfe97 std::__terminate(void (*)())
9 0x7fff4f6df8fe __cxa_get_exception_ptr
10 0x7fff4f6df8c5 __cxxabiv1::exception_cleanup_func(_Unwind_Reason_Code, _Unwind_Exception*)
11 0x7fff50864c44 _objc_exception_destructor(void*)
12 0x10dd6fbbf NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
13 0x10ddbb14c -[TNSRuntime executeModule:referredBy:]
14 0x10d68d713 main
15 0x7fff516ecd29 start
16 0x1
JS Stack:
在 main.js 我这样导入它：
import axios from 'axios'
并在这样的组件中进行后期调用：
return axios.post('/api/v1/auth/login',
email,
password
).then(response =>
console.log(response)
).catch((error) => console.log(error))
这很奇怪，但我想不通。如果我完全删除 axios，错误就消失了。 我该如何解决？
package.json 中的项目依赖项
"core-js": "^3.2.1",
"frontend-core": "file:../frontend-core",
"moment": "^2.24.0",
"nativescript-app-sync": "^1.0.7",
"nativescript-carousel": "^6.1.1",
"nativescript-geolocation": "^5.1.0",
"nativescript-localize": "^4.2.0",
"nativescript-theme-core": "^2.0.23",
"nativescript-ui-calendar": "^5.0.0",
"nativescript-ui-dataform": "^5.1.1",
"nativescript-ui-sidedrawer": "^7.0.3",
"nativescript-vue": "^2.4.0",
"nativescript-vue-lifecycle-hooks": "^1.0.0",
"nativescript-vue-navigator": "^0.2.0",
"tns-core-modules": "^6.1.1",
"axios": "^0.19.0",
"vue": "^2.6.10",
"vuex": "^3.1.1"
【问题讨论】：
看起来您的响应不是 JSON，请尝试将responseType 设置为 text。如果仍然遇到问题，请分享 Playground 示例。
我认为这与响应无关，因为我也尝试使用jsonplaceholder.typicode.com/todos/1 - 这是一个 JSON 端点-。
是用 Playground 复制的吗？
我会检查，但我认为很难将整个设置移动到游乐场。
你不需要移动任何东西，你只需要安装 Axios 并调整你的 require 语句（相对路径），点击 API。
【参考方案1】：
好像 axios 在 NativeScript + Vue 上有问题。当我改变时它起作用了
import axios from 'axios' 到 import axios from 'axios/dist/axios'
【讨论】：
以上是关于在 nativescript-vue 项目上的 axios 导入时出现意外的令牌错误的主要内容，如果未能解决你的问题，请参考以下文章
无法使用 Nativescript-Vue GridLayout 显示项目列表
如何更改 nativescript-vue 中列表项的颜色/背景颜色？
Nativescript-Vue 7 - 创建新项目后，我在 google chrome devtools 中看不到网络活动
Nativescript-vue TabView 无法呈现来自 API 的第一个项目