电子商务版微信小程序_ionic3+Angular4完成接口请求

2021-01-11 13:49

ionic3+Angular4实现接口请求及本地json文件读取示例       本篇文章主要介绍了ionic3+Angular4实现接口请求及本地json文件读取示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

一 准备工作

首先,ionic3+Angular4的开发环境你得有,这里就不赘述。环境准备好,创建一个空白项目,模板自选。

二 实现过程

1 新建json文件和service

service记得在app.module.ts中引用

json和service

2 json文件格式

格式类似这样,根据实际需求决定。

 "id":"1",
 "name":"xiehan",
 "age":"24",
 "message":"测试json文件读取"
 "id":"2",
 "name":"xiehan",
 "age":"24",
 "message":"测试json文件读取"
 "id":"3",
 "name":"xiehan",
 "age":"24",
 "message":"测试json文件读取"
 "id":"4",
 "name":"xiehan",
 "age":"24",
 "message":"测试json文件读取"

3 service

import {Injectable} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {Http, Response} from '@angular/http';
import "rxjs/add/operator/map";

getHomeInfo(): Observable Response { return this.httpService.request('users') // 本地json文件请求 getRequestContact(){ return this.httpService.get("assets/json/message.json")

4 数据显示

1 网络接口请求

//home.ts
import {ChangeDetectorRef, Component} from '@angular/core';
import { NavController } from 'ionic-angular';
import {DemoService} from "../../services/demo.service";
@Component({
 selector: 'page-home',
 '
export class HomePage {
 // 接收数据用
 listData: Object;
 // 依赖注入
 constructor(public navCtrl: NavController,
 private ref: ChangeDetectorRef,
 private demoService: DemoService,) {
 ionViewDidLoad() {
 // 网络请求
 this.getHomeInfo();
 getHomeInfo(){
 this.demoService.getHomeInfo()
 .subscribe(res = {
 this.listData = res.json();
 // 数据格式请看log
 console.log("listData------- ",this.listData);
 this.ref.detectChanges();
 }, error = {
 console.log(error);

效果图


2 本地json文件请求

service中已经写了getRequestContact()方法对本地json文件读取。

//contact.ts
import {ChangeDetectorRef, Component} from '@angular/core';
import { NavController } from 'ionic-angular';
import {DemoService} from "../../services/demo.service";
@Component({
 selector: 'page-contact',
 '
export class ContactPage {
 contactInfo=[];
 constructor(public navCtrl: NavController,
 private demoService: DemoService,
 private ref: ChangeDetectorRef,) {
 ionViewDidLoad() {
 // 网络请求
 this.getRequestContact();
 getRequestContact(){
 this.demoService.getRequestContact()
 .subscribe(res = {
 this.contactInfo = res.json();
 console.log("contactInfo------- ",this.contactInfo);
 this.ref.detectChanges();
 }, error = {
 console.log(error);
// 
 ion-header 
 ion-navbar 
 ion-title 
 /ion-title 
 /ion-navbar 
 /ion-header 
 ion-content 
 ion-list 
 ion-item *ngFor="let item of contactInfo" 
 div 
 span 姓名:{{item .name}} /span 
 span 年龄:{{item .age}} /span 
 span 信息:{{item .message}} /span 
 /div 
 /ion-item 
 /ion-list 
 /ion-content 

效果图


三 总结

1.所有创建的page要在app.module.ts中引用;
2.service要在app.module.ts中引用;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




扫描二维码分享到微信

在线咨询
联系电话

020-66889888