#javascript #angularjs #angular #nested #observable
#javascript #angularjs #angular #вложенные #наблюдаемый
Вопрос:
Я новичок в наблюдаемых. Я использую их, чтобы проверить, вошел ли пользователь в систему или нет в конструкторе моей корневой страницы.
Я вложил много наблюдаемых, чтобы сделать это, и они работают нормально, но я думаю, что есть способ сгладить все эти вложенные наблюдаемые.
Я просто хочу, чтобы вы просмотрели код и сообщили мне, что можно улучшить, и смогу ли я сгладить эти наблюдаемые в login-page.ts
pages/login-page/login-page.ts
export class LoginPage {
constructor(public navCtrl: NavController, private userService: UserService, private storage: Storage) {
this.userService.getStoredToken().subscribe(
data => {
console.log('Token and username are stored.')
this.userService.checkTokenValidity(data[0], data[1]).subscribe(
() => {
console.log('Token and username and valid.')
// Go to the homepage
this.navCtrl.push(TabsPage)
}, err => {
console.log("Invalid token, trying the stored username and password.")
this.userService.getStoredUserAndPassFromStorage().subscribe(data => {
console.log('Successfuly retrieved the username and password')
this.userService.login(data[0], data[1]).subscribe((res) => {
console.log('Username and password are valid.')
// Go to the homepage
this.navCtrl.push(TabsPage)
// Save new user data to local storage
this.userService.authSuccess(res.access_token, data[0], data[1])
}, err => {
console.log("Failed to login using the stored username and password.")
//Remove the loading and show login form
})
}, err => {
console.log("No stored token.")
//Remove the loading the and login form
})
}
)
},
err => {
//Remove the loading the show login form
}
)
} поставщики /user-service.ts
export class UserService {
loginDetails: ILogin
headers: any
error: string
apiUrl = global.apiUrl
loginUrl = api.loginUrl
contentHeader: Headers = new Headers({'Content-Type': 'application/json'})
constructor(public http: Http, private storage: Storage) {
}
logout() {
this.storage.remove('_user')
this.storage.remove('_pass')
this.storage.remove('_token')
}
login(username: string, password: string): Observable<IAccessToken> {
this.loginDetails = {
client_id: global.clientId,
client_secret: global.clientSecret,
grant_type: 'password',
username: username,
password: password,
}
let body = JSON.stringify(this.loginDetails)
let options = new RequestOptions({headers: this.contentHeader})
return this.http
.post(this.loginUrl, body, options)
.map(response => response.json())
}
getStoredToken(): Observable<string[]> {
return Observable.forkJoin(
this.storage.get('_token'),
this.storage.get('_user')
)
}
getStoredUserAndPassFromStorage(): Observable<string[]> {
return Observable.forkJoin(
this.storage.get('_user'),
this.storage.get('_pass')
)
}
checkTokenValidity(token: any, username: any): Observable<IAccessToken> {
let params = new URLSearchParams()
params.set('access_token', token)
params.set('_format', 'json')
return this.http.get(api.userInfoUrl(username), {
search: params
}).map(response => response.json())
}
authSuccess(access_token, username, password) {
this.error = null
this.storage.set("_user", username)
this.storage.set("_pass", password)
this.storage.set("_token", access_token)
}
} Ответ №1:
Для передачи параметров и запуска нового наблюдаемого из наблюдаемого вы можете использовать switchMap оператор. В вашем случае это было бы
this.userService.getStoredToken().switchMap(data =>
this.userService.checkTokenValidity(data[0], data[1]).switchMap(isvalid =>
this.userService.getStoredUserAndPassFromStorage().switchMap(data =>
this.userService.login(data[0], data[1]).subscribe((res) => {
console.log('Username and password are valid.')
// Go to the homepage
this.navCtrl.push(TabsPage)
// Save new user data to local storage
this.userService.authSuccess(res.access_token, data[0], data[1])
}, err => {
console.log("Failed to login using the stored username and password.")
//Remove the loading and show login form
})
Комментарии:
1. Спасибо за ответ, это помогло мне придумать наилучшую практику, ИМХО, я опубликую ее сейчас в качестве ответа.
Ответ №2:
Спасибо Александру за указание на преимущество switchMap в этом случае.
Я использовал ваше решение и провел некоторый рефакторинг поверх него, чтобы убедиться, что оно максимально читабельно.
export class LoginPage {
login: ILogin
constructor(public navCtrl: NavController, private userService: UserService, private storage: Storage) {
this.forgotPasswordPage = ForgotPasswordPage
this.checkIfUserIsLoggedIn();
}
checkIfUserIsLoggedIn() {
const storedToken$ = this.userService.getStoredToken()
const checkTokenValidity$ = (data) => this.userService.checkTokenValidity(data[0], data[1])
const storedUserAndPass$ = this.userService.getStoredUserAndPassFromStorage();
const login$ = (data) => this.userService.login(data)
const checkStoredTokenValidity$ = storedToken$.switchMap(data => checkTokenValidity$(data))
const loginUsingStoredUsernameAndPass$ = storedUserAndPass$.switchMap(data => login$(data))
checkStoredTokenValidity$.subscribe(() => {
this.navCtrl.push(TabsPage)
}, () => {
console.log('Invalid token, now trying the saved username and password');
loginUsingStoredUsernameAndPass$.subscribe(res => {
this.navCtrl.push(TabsPage)
this.userService.updateToken(res.access_token)
}, () => {
console.log('Invalid stored username and pass, they possibly just got changed.')
//Remove the loading animation to show the login form.
})
})
}
} ИМХО, это лучшая версия кода, на основе которой я смог сгенерировать switchMap Если кто-то может придумать лучшую версию, пожалуйста, предложите ее.