Angular+Onsen UI的Monaca应用如何正确实现Ajax请求获取服务端数据

代码问题修正 #

你原代码存在以下几处错误：

• Angular没有全局的angular.request方法，不同版本的Angular需要通过注入对应HTTP服务发起请求
• alert{data}、alert{'Error'}属于语法错误，alert是函数，必须用小括号()包裹参数
• success/error回调已被废弃，推荐使用Promise或者Observable的标准回调写法

适配方案 #

方案1：AngularJS 1.x版本（适配多数Onsen UI旧示例） #

首先在控制器中注入$http服务，再按如下格式编写代码：

// 示例控制器定义，需注入$http依赖
app.controller('MainController', ['$scope', '$http', function($scope, $http) {
  $scope.getDataPullCheck = function() { 
    alert("getDataPullCheck");
    $http({
      url: "https://***你的远程文件地址***",
      method: 'POST',
      // 如需传参可添加data字段
      // data: {key: value}
    }).then(function (response) { 
      // 响应数据存储在response.data中
      console.log(response.data); 
      alert(response.data);
    }).catch(function (error) {
      console.error('请求异常：', error);
      alert('Error');
    });
  }
}]);

方案2：Angular 2+版本 #

1. 首先在app.module.ts中导入并注册HttpClientModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, HttpClientModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 在组件中注入HttpClient后发起请求：

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<button (click)="getDataPullCheck()">拉取数据</button>`
})
export class AppComponent {
  constructor(private http: HttpClient) {}

  getDataPullCheck() {
    alert("getDataPullCheck");
    this.http.post('https://***你的远程文件地址***', {})
      .subscribe({
        next: (data) => {
          console.log(data);
          alert(JSON.stringify(data));
        },
        error: (err) => {
          console.error('请求异常：', err);
          alert('Error');
        }
      })
  }
}

注意事项 #

• 浏览器调试时需要你的服务端配置CORS跨域头，否则请求会被浏览器拦截，打包成Monaca应用后不存在跨域限制
• 如果是拉取静态文件更推荐使用GET请求，修改method为GET即可，POST请求通常用于提交数据
• 如需配置请求头、超时等参数，可在HTTP请求的配置项中添加对应字段

内容的提问来源于stack exchange，提问作者RobertyBob