ionic4与webApi的交互

ionic4与webApi的交互

在新开发的项目，使用了ionic前端框架，后端webapi这两种框架。对于刚刚上手的ionic4，还有很多地方不是特别熟悉，尤其是与后端交互这里！不过在不断的尝试下，终于ok了~

今天就拿http协议下的get请求来进行介绍

1、添加引用和注入

在项目的 app.module.ts文件中添加引用

import { HttpClientModule, HttpClientJsonpModule} from '@angular/common/http';

在所需要使用的项目ts文件中，同样添加引用，同时在构造函数中添加依赖注入

import { HttpClient, HttpHeaders } from '@angular/common/http';

constructor(public http: HttpClient) { }

2、编写方法

所谓方法，就是将连接api的代码封装在一个方法内，在需要的时候调用就可以了

testApi () {
    const url ='这里是api的地址'；
    this.http.get(url).subcribe(response => {
    console.log(response['data']);
    }
}

因为后端返回的是json串格式，而json串是以键值对的形式存在的，所以要拿到返回的json中的值使用

response['key']取出来的值为“123”

{

       “key”: "123"

}

response是上面定义的

如果返回的json数组格式，那就用索引来区分来取值

{

  {

       "key" : "123"

}

  {

     "key":"321"

  }

}

response[0]['key']的值为123

response[1]['key']的值为321

如果需要判断json串的长度可使用以下语法

const lenght = Object.keys(response).length;

就到这里了~如有错误，欢迎指正~