angular 自定义数据 + 获取路由参数 +ajax封装+封装提示

最新推荐文章于 2023-03-27 11:23:39 发布

qq_38674970

最新推荐文章于 2023-03-27 11:23:39 发布

阅读量402

点赞数

CC 4.0 BY-SA版权

分类专栏： angular

本文链接：https://blog.youkuaiyun.com/qq_38674970/article/details/93616000

angular 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了在 Angular 中如何封装 HTTP 请求，包括 POST 和 GET 方法，并展示了如何使用这些封装的方法进行数据交互。同时，文章还讲解了如何通过依赖注入服务来实现请求的统一管理和错误处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  export const dataList:dataList[] = [                      // 导出列表数据
    {
      title:"标题1",
      list:[
          {name:"创建时间",data:"2015-03-14"},
      ],
    },
    // 当然别忘记导出

import { dataList2 } from '../../assets/mark'; // 先引入

this.dataList = dataList2;                     // 使用

import { ActivatedRoute } from '@angular/router'; // 引入
constructor(private activatedRoute: ActivatedRoute) 

    this.activatedRoute.queryParams.subscribe(queryParams => {
      console.log(queryParams);
    });
  
    // 获取参数


import { ajaxUrl } from 'src/environments/environment';
import { HttpClient } from '@angular/common/http';   // http请求
import { Injectable } from '@angular/core';          // 依赖注入 
import { HttpHeaders } from '@angular/common/http';  // 改变头部
var md5 = require("./md5.js")
@Injectable({               // 依赖注入
    providedIn: 'root',
})
export class Greeter {              // 创建一个类
    constructor(private http: HttpClient) {}

    public post(url2, data, callback) {
        let time2 = new Date().getTime();
        let url = ajaxUrl + url2;
        let time=time2.toString();
        let content: string = "POST|" + url;
        if (data) {content += " -d " + data;}
        let key: string = md5.hex_md5(content);
        var httpOptions = {
            headers: new HttpHeaders({"timestamp":time,"key":key,})
        };
        this.http.post(url,data,httpOptions,).subscribe(function (data) {
            callback(data);
        })
    }

    public get(url2, callback) {
        let time2 = new Date().getTime();
        let url = ajaxUrl + url2;
        let time=time2.toString();
        let content: string = "POST|" + url;
        let key: string = md5.hex_md5(content);
        var httpOptions= {
            headers: new HttpHeaders({"timestamp":time,"key":key,})
        };
        this.http.get(url,httpOptions).subscribe(function (data) {
            callback(data);
        })
    }   

}

// 封装

import { Greeter } from 'src/assets';
  constructor(private http: Greeter) {

  }

   this.http.post("/api", null, function (r) {
      console.log(r);
    })
  // 使用

@Injectable({               // 每一个类都需要才能使用
    providedIn: 'root',
})
export class model { 
    
constructor(public toastController: ToastController) {}
async presentToast(msg) {
    const toast = await this.toastController.create({
      message: msg,
      duration: 2000,
      position: 'top',
    });
    toast.present();
  }

 public easyModel(msg){
     this.presentToast(msg);
 }


 }
//其他的和上面没啥区别