JS实现网络请求方法汇总

实现网络请求方法汇总

1.创建service，提供公共方法，模拟网络请求

import { Injectable } from '@angular/core';
import {Observable} from "rxjs";

@Injectable({
  providedIn: 'root'
})
export class RequestService {

  public data:string ="张三";

  constructor() { }
  run(){
    return this.data
  }
  getCallbackData(cb:any){
    setTimeout(()=>{
      // return this.data;
      cb(this.data)
    },2000)
  }
  getPromiseData(){
    return new Promise((resolve, reject)=>{
      setTimeout(()=>{
        resolve(this.data);
      },2000)
    })
  }

  getRxjsData(){
    return new Observable(observer=>{
      setTimeout(()=>{
        observer.next(this.data);
        // observer.error(this.data);
      },2000)
    })
  }

  getPromiseIntervalData(){
    return new Promise((resolve)=>{
      setInterval(()=>{
        resolve(this.data);
      },2000)
    })
  }

  getRxjsIntervalData(){
    return new Observable(observer=>{
      let count = 0;
      setInterval(()=>{
        observer.next(this.data + count++);
        // observer.error(this.data);
      },2000)
    })
  }
}

2.创建网络请求

使用callback

this.requestService.getCallbackData((data:any)=>{
      console.log("callback---",data);
})

使用promise

this.requestService.getPromiseData().then(res=>{
      console.log("promise---",res);
    })

使用rxjs

this.requestService.getRxjsData().subscribe(res=>{
      console.log("rxjs---",res);
    })

使用rxjs撤销数据请求

 //过一秒以后撤销刚刚的异步请求
    let d = this.requestService.getRxjsData().subscribe(res=>{
    //在撤销时如果未获取到数据，则不会打印
      console.log("rxjs---撤销",res);
    });
    setTimeout(()=>{
      d.unsubscribe(); //取消订阅，取消方法的执行
    },1000);

使用promise不能一直请求数据

this.requestService.getPromiseIntervalData().then(res=>{
      //只能执行一次 不能源源不断的返回值
      console.log("promiseInterval---",res);
    })

使用rxjs可以一直请求数据

this.requestService.getRxjsIntervalData().subscribe(res=>{
      //可以每两秒钟执行一次 可以实现爬虫
      console.log("rxjsInterval---",res);
    })

以上方法全部执行打印

使用HttpClient获取网络数据

//引入HttpClient,HttpHeaders
import {HttpClient,HttpHeaders} from '@angular/common/http'
//创建实例
constructor( public http:HttpClient ) { }

HttpClient直接get请求

getData(){
    console.log("执行get请求");
    let api = "http://a.itying.com/api/productlist"
    this.http.get(api).subscribe((res:any)=>{
      this.list=res.result;
    });
  }

HttpClient直接post请求

postData(){
    //手动设置请求的类型  固定写法
    const httpOptions = {headers:new HttpHeaders({'Content-type':'application/json'})}
    let api = 'https://www.baidu.com/?tn=62095104_43_oem_dg'
    this.http.post(api,{userName:''},httpOptions).subscribe(res => {
      //获取返回的数据
    })
    console.log("执行post请求");
  }

HttpClient/jsonp进行数据请求

getJsonp(){
    let api = "http://a.itying.com/api/productlist"
    this.http.jsonp(api,'callback').subscribe((res:any)=>{
      this.list=res.result;
    })
  }

使用promise/axios进行数据请求

//使用第三方模块实现数据请求
axiosGet(api:any){
    return new Promise((resolve, reject)=>{
      axios.get(api).then(res=>{
        console.log(res);
        resolve(res.data);
      })
    })
    
  getAxios(){
    let api = "http://a.itying.com/api/productlist"
    this.axiosGet(api).then((res:any)=> {
      this.list=res.result;
    })
  }