angular提供的服务可以实现传递和数据共享,例如两个组件都需要使用的方法和数据可以写在angular的服务中。

1.首先在控制台用命令创建服务 ng g service services/httpservice
创建后的目录和默认的配置为红框里的内容
暴露的名称是HttpserviceService
在这里插入图片描述
2.在app.module.ts文件中引入和挂载HttpserviceService
在这里插入图片描述
3.在服务中封装axios请求数据的方法 httpservice.service.ts文件如下

import { Injectable } from '@angular/core';
import axios from 'axios';
@Injectable({
  providedIn: 'root'
})
//可以利用服务来传递和共享数据。
export class HttpserviceService {
  constructor() { }

  //在服务中封装axios请求
  getaxios(http: any) {
    return new Promise((resolve, reject) => {
      axios.get(http)
        .then(function (response) {
          resolve(response) //请求成功
        })
        .catch(function (error) {
          reject(error) //请求失败
        });
    })
  }
  
}

4.在需要调接口获取数据的组件中调用

我这里是在html中写了一个按钮来测试

<button (click)="getaxiosdata()">测试axios获取数据</button>

注意引用
接口:https://api-hmugo-web.itheima.net/api/public/v1/categories'
在这里插入图片描述ng serve --open 运行后点击按钮就可以在控制台看到获取的数据
在这里插入图片描述

总结 :主要是注意引用和挂载的几个步骤 其次就是Promise异步请求的使用

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐