Angular 6中服务回调无响应问题咨询（数据插入成功）

首先，咱们先拆解问题核心：数据能插入数据库说明HTTP请求已经成功发送，但回调没执行，大概率是上下文丢失或框架混用导致的逻辑冲突，下面一步步解决：

1. 组件回调的this上下文丢失（最直接的问题） #

你在组件调用时用了普通function作为回调，这会让this不再指向组件实例——也就是说this.loader=false根本执行不了（甚至可能在控制台报错，只是你没注意到），后续的日志自然也打不出来。

解决方法：改用箭头函数保留组件的上下文：

crearNegocio(){
  this.loader=true;
  // 把普通function换成箭头函数，锁定this指向组件实例
  this.negocioS.crearNegocio(this.negocio, (err,res) => {
    if(!err){
      this.loader=false;
      console.log("res",res);
    }else{
      this.loader=false;
      console.log(err)
    }
  });
}

2. 服务中HTTP请求的框架混用问题（隐藏的致命冲突） #

你引入了AngularJS的脚本（angular.js 1.7.1），但服务代码用的是Angular（2+）的HttpClient+subscribe语法，这两个框架的HTTP体系完全不兼容，会导致订阅逻辑异常，回调无法正常触发。

如果你的项目是Angular（2+）：

删除页面中AngularJS的脚本引用，确保服务正确注入HttpClient：

// 服务文件中正确引入并使用HttpClient
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class NegocioService {
  constructor(private http: HttpClient, private config: /* 你的配置服务 */) {}

  crearNegocio(negocio, callback){ 
    const user = JSON.parse(localStorage.getItem("currentUser")); 
    const id_usuario = user.objUser.id_usuario; 
    negocio.id_usuario = id_usuario; 
    this.http.post(`${this.config.initialConfig}/negocio/create/`, negocio)
      .subscribe(
        (response) => { callback(null, response); },
        (error) => { callback(error); }
      );
  }
}

如果你的项目是AngularJS：

改用AngularJS的$http Promise语法，而非RxJS的subscribe：

// AngularJS服务定义
app.service('NegocioService', ['$http', 'config', function($http, config) {
  this.crearNegocio = function(negocio, callback) {
    var user = JSON.parse(localStorage.getItem("currentUser"));
    var id_usuario = user.objUser.id_usuario;
    negocio.id_usuario = id_usuario;
    // AngularJS用then/catch处理Promise，response.data才是接口返回的数据
    $http.post(config.initialConfig + "/negocio/create/", negocio)
      .then(function(response) {
        callback(null, response.data);
      })
      .catch(function(error) {
        callback(error);
      });
  };
}]);

// AngularJS控制器中调用（用vm保存上下文）
app.controller('YourController', ['NegocioService', function(negocioS) {
  var vm = this;
  vm.loader = false;

  vm.crearNegocio = function() {
    vm.loader = true;
    negocioS.crearNegocio(vm.negocio, function(err, res) {
      vm.loader = false;
      if(!err) {
        console.log("res", res);
      } else {
        console.log(err);
      }
    });
  };
}]);

3. 优化建议：用Observable/Promise替代回调（更符合Angular最佳实践） #

回调函数容易引发上下文问题和回调地狱，推荐服务直接返回Observable（Angular）或Promise（AngularJS）：

Angular（2+）优化版：

// 服务：直接返回Observable
crearNegocio(negocio): Observable<any> { 
  const user = JSON.parse(localStorage.getItem("currentUser")); 
  const id_usuario = user.objUser.id_usuario; 
  negocio.id_usuario = id_usuario; 
  return this.http.post(`${this.config.initialConfig}/negocio/create/`, negocio);
}

// 组件：订阅Observable处理结果
crearNegocio(){
  this.loader=true;
  this.negocioS.crearNegocio(this.negocio).subscribe({
    next: (res) => {
      this.loader=false;
      console.log("res",res);
    },
    error: (err) => {
      this.loader=false;
      console.log(err);
    }
  });
}

验证步骤 #

1. 打开浏览器控制台（F12），检查是否有未捕获的错误（比如this未定义、框架冲突报错）；
2. 查看HTTP请求的响应状态码，确保是200系列的成功状态；
3. 先修复this上下文问题，再排查框架混用问题，逐步验证。

内容的提问来源于stack exchange，提问作者Edd Núñez