javascript - जब मैं async / wait feature का उपयोग करता हूँ तो कोणीय UI राउटर संकल्प फ़ंक्शन पर प्रक्रिया नहीं करता है?




angularjs angular-ui-router async-await (3)

मुद्दा यह है कि कोणीय को कोणीय वादा करता है कि यही कारण है कि आपका काम करेगा, लेकिन आपकी प्रतीक्षा नहीं होगी, आप इस तरह एक पुस्तकालय का उपयोग कर हल कर सकते हैं: https://www.npmjs.com/package/angular-async-ait या एक निर्माण करें जैसे वे यहां प्रदर्शन कर रहे हैं https://medium.com/@alSkachkov/using-async-waait-function-in-angular-1-5-babel-6-387f7c43948c

आपकी समस्या के साथ गुड लक!

मैं इस आलेख के अनुसार राज्य और घटक से संबंधित कुछ टेम्पलेट को प्रस्तुत करने की कोशिश कर रहा हूं

देव-सर्वर के अंतर्गत चल रहे मेरे प्रोजेक्ट में यह सभी ठीक काम करता है और जब मैं $state.go("home") को निष्पादित करता हूँ तो घटक टेम्प्लेट लोड होता है मैं कैसे अपेक्षा करता हूं, लेकिन जब मैं एक परीक्षण वातावरण में करता हूं, यह काम नहीं करता है

इससे पहले, परीक्षण में, जब मैं यूआई-राउटर के साथ "घटक" के बजाय "टेम्पलेट" का उपयोग करके "पुराना तरीका" का उपयोग करता हूं, $rootScope.$digest() निष्पादित करता $rootScope.$digest() <div ui-view></div> लेकिन इस नए तरीके का उपयोग कर यह अब और काम नहीं करता है।

मैं क्या गलत कर रहा हूं?

संपादित करें : मैं इस समस्या को गहराई से समझने की कोशिश कर रहा हूं और मुझे लगता है कि यह समस्या एचटीटीपी अनुरोध से जुड़ी है जो किया गया था। हो सकता है कि यह उस तरीके से संबंधित है जो मेरा वादा संकलन कॉलबैक पर async / await का उपयोग करता है कृपया सेवा की जांच करें:

सर्विस

export class TodoService {
    constructor($http, BASE_URL) {
        this.http = $http;
        this.url = `${BASE_URL}/todos`
    }
    async getTodos() {
        const apiResponse = await this.http.get(this.url)
        return apiResponse.data.todos
    }
}

रूटर

import '@uirouter/angularjs'

export function routes($stateProvider, $locationProvider) {
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false,
        rewriteLinks: true,
    })

    $stateProvider
        .state("home", {
            url: "/",
            component: "todoList",
            resolve: {
                todosList: TodoService => TodoService.getTodos()
            }
        })
}

परीक्षा

import { routes } from "routes"
import { TodoListComponent } from "components/todoList.component"
import { TodoService } from "services/todo.service"

describe("TodoListComponent rendering and interaction on '/' base path", () => {
    let componentDOMelement
    let stateService

    beforeAll(() => {
        angular
            .module("Test", [
                "ui.router"
            ])
            .config(routes)
            .constant("BASE_URL", "http://localhost:5000/api")
            .component("todoList", TodoListComponent)
            .service("TodoService", TodoService)
            //I enable this for better logs about the problem
            .run(['$rootScope','$trace', function($rootScope, $trace) {
               $trace.enable("TRANSITION")
             }])
    })
    beforeEach(angular.mock.module("Test"))

    beforeEach(inject(($rootScope, $compile, $state, $httpBackend) => {
        //build the scene
        //1st render the root element of scene: We needs a router view for load the base path
        let scope = $rootScope.$new()
        componentDOMelement = angular.element("<div ui-view></div>")

        $compile(componentDOMelement)(scope)
        scope.$digest()
        
         document.body.appendChild(componentDOMelement[0]) //This is a hack for jsdom before the $rootScope.$digest() call
        //2nd let's create a fake server for intercept the http requests and fake the responses
        const todosResponse = require(`${__dirname}/../../stubs/todos_get.json`)
        $httpBackend
            .whenGET(/.+\/todos/)
            .respond((method, url, data, headers, params) => {
                return [200, todosResponse]
            })

        //3rd Let's generate the basic scenario: Go at home state ("/" path)
        $state.go("home")
        $rootScope.$digest()
        $httpBackend.flush()
    }))

    it("Should be render a list", () => {
        console.log("HTML rendered")
        console.log(document.querySelectorAll("html")[0].outerHTML)
    })
})

HTML परिणाम जो प्रतिपादन नहीं करता

<html>
<head>
<style type="text/css">
@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate) {
  display:none !important;
}
ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{
  position:absolute;
}
</style>
</head>
<body><!-- uiView: -->
</body>
</html>

साथ ही, मैंने राज्य का पता लगाया HTML से पहले बदलें:

console.log node_modules/@uirouter/core/_bundles/ui-router-core.js:1276
    Transition #0-0: Started  -> "Transition#0( ''{} -> 'home'{} )"

console.log node_modules/@uirouter/core/_bundles/ui-router-core.js:1282
    Transition #1-0: Ignored  <> "Transition#1( ''{} -> 'home'{} )"

console.log node_modules/@uirouter/core/_bundles/ui-router-core.js:1313
    Transition #1-0: <- Rejected "Transition#1( ''{} -> 'home'{} )", reason: Transition Rejection($id: 0 type: 5, message: The transition was ignored, detail: "undefined")

मुझे एक संक्रमण में एक समस्या दिखाई देती है लेकिन कोई कारण नहीं दिया गया था।

================================================== ======================

2 संपादित करें अंत में हमें समस्या मिली लेकिन मैं वास्तविक समस्या को समझ नहीं पा रहा हूं । मैंने अपनी परियोजना में समस्या दिखाने के लिए एक शाखा बनाई। यह async/await से संबंधित है async/await जावास्क्रिप्ट विशेषता का async/await :

export class TodoService {
    constructor($http, BASE_URL) {
        this.http = $http;
        this.url = `${BASE_URL}/todos`
    }
    //Interchange the comment on the getTodos method and run `npm run tdd` for see the problem:
    //When async/await doesn't used, the html associated to the resolve in the
    // "/" route that used this service, the promise was resolved that expected.
    //The idea for this branch it's research about the problem and propose a way
    //for we can use async/await on the production code and on the testing environment
    async getTodos() {
        const apiResponse = await this.http.get(this.url)
        return apiResponse.data.todos
    }
    // getTodos() {
    //     return this.http.get(this.url).then(res => res.data.todos)
    // }
}

रिपॉजिटरी

तो मेरे नए प्रश्न हैं:

  • क्यों मैं एसिंक / प्रतीक्षा कार्यक्षमता का उपयोग करता हूं, यह परीक्षण पर्यावरण पर यूआई-राउटर के समाधान के साथ संगत नहीं है, लेकिन उत्पादन कोड में यह काम करता है?
  • शायद यह $ httpBackend.flush () कॉल से संबंधित है?

संपादित करें 3 मुद्दा 3522 को कोणीय UI राउटर रिपॉजिटरी में रिपोर्ट किया गया


यह सिर्फ एक शिक्षित अनुमान है जिस तरह से मेरे resolve के तरीके के बारे में मेरी समझ के आधार पर काम करते हैं और ngMock क्या करता है। आपके पहले उदाहरण में, getTodos लिए आपका resolve $http वादा का समाधान नहीं हो रहा है, तब तक वापस नहीं getTodos है, जिस पर आप प्रतिक्रिया से मूल्य getTodos और इसे वापस कर देते हैं। हालांकि, resolve वालों के लिए $q.Promise q की अपेक्षा होती है। जब तक कि इसका समाधान नहीं हो जाता तब तक रूटर के रेंडरिंग को रोकने के लिए एक प्रहरी के रूप में $q.Promise मूल्य। आपके कोड में, यह पारदर्शी कैसे होता है, इस पर निर्भर करता है कि await और return कॉल की संभावना सही प्रहरी मूल्य का उत्पादन नहीं करती है, इसलिए इसे एक तुल्यकालिक प्रतिक्रिया की तरह व्यवहार किया जाता है।

परीक्षण करने का एक तरीका आपके todolist घटक के नियंत्रक में resolve का अनुरोध करना होगा और मूल्य का निरीक्षण करेगा। मैं शर्त लगा सकता हूँ कि यह $q.Promise नहीं है। $q.Promise , यद्यपि यह एक मूल वादा हो सकता है

resolve का उपयोग करते समय, हालांकि, सिर्फ एक जोड़कर और इसे वापस करके वादा चेन करें। राउटर बाकी को संभालना होगा

या बेहतर, अवलोकन के लिए स्विच करें! (/ मुझे आने वाली टमाटर बतख)


कॉर्डोवा 3.0 + जेक्यूएम 1.3.2: config.xml में "फुलस्क्रीन" को "झूठी" में बदलकर "एडजस्टपैन" तय किया गया और कुंजीपटल प्रदर्शित होने पर मेरे इनपुट को कवर होने से रोका। हालांकि, धुंध () कीबोर्ड बंद नहीं करेगा और यह प्लगइन अद्भुत काम करता है।

फोनगैप के लगभग नवीनतम संस्करण के लिए:

  • Src में अपने ऐप पैकेज में SoftKeyBoard.java जोड़ें
  • संपत्ति / www में softkeyboard.js जोड़ें
  • <feature name="SoftKeyBoard"><param name="android-package" value="com.yourAppPackage" /></feature> साथ अद्यतन करें: <feature name="SoftKeyBoard"><param name="android-package" value="com.yourAppPackage" /></feature>
  • अपनी प्लगइन को कॉल करें: plugins.SoftKeyBoard.hide(function() {//success }, function() {//fail });




javascript angularjs angular-ui-router async-await