angular 利用service服务和axios请求数据封装请求方法
·
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异步请求的使用
更多推荐
所有评论(0)