Question

我目前有一个角度项目，它向服务器发出请求，但是，~/.config/fish/conf.d/omf.fish中指定的成功回调从未执行。

我似乎没有发现这个错误的出处，任何指针或解决方案都将不胜感激。

createBatch

显示网络响应的图像

显示空控制台输出的图像

版本信息

// Template

 <arms-loader-indicator *ngIf='isLoading'></arms-loader-indicator>
 <div class='signup-form'>
    <label for='file'>Select a file: </label>
    <input
    type='file'
    name='students'
    (change) = 'checkValidity($event)'
    id='file'
    #students
    accept='application/octet-stream,application/csv,application/excel,application/vnd.ms-excel, application/vnd.msexcel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'>
    <button type='button' [disabled]='validForm' type='submit' (click) = createBatch(students.files[0]) class='btn btn-secondary'>Submit</button>
  </div>



 // Method called on button click

 createBatch(file): void {
 let formData = new FormData();
 formData.append('students', file);
 this.msgService.hideMessage();
 this.isLoading = true;
 this.studentService.createStudentByBatch(formData).subscribe(
  (data) => {
     console.log('data: ', data); // This code is never executed even when he server return 200 status
     if (data.status === 200) {
       this.isLoading = false;
       this.msgService.showMessage('success', 'students uploaded successfully', 5000);
     }
   },
   error => {
     if (error.status === 422) {
       this.isLoading = false;
       this.msgService.showMessage('error', 'Unable to upload, student(s) already exists', 10000);
     }
   }
 );
}


// Student's createStudentByBatch service method

 createStudentByBatch(payload) {
 let token = this.auth.getToken('admin');
 return this.http.post(`${this.auth.BASE_URL}${this.BASE}/student/upload`, payload, {
   observe: 'response',
   headers: {
     Authorization: token
   }
 })
}


 // Current route defination

 const routes: Routes = [
 {
   path: '',
   component: views.SigninFormComponent
 },
 {
   path: 'signup',
   component: views.SignupFormComponent
 },
 {
   path: 'send/email',
   component: views.AdminEmailSendComponent
 },
 {
   path: 'password/reset',
   component: views.PasswordResetComponent
 },
 {
   path: 'dashboard',
   component: views.AdminComponent,
   canActivateChild: [AuthGuard],
   children: [
     {
       path: '',
       component: component.DashBoardHighlightsComponent
     },
     {
       path: 'student/create',
       component: views.StudentCreateComponent
     }
    ]
  }
];

Answer 1

这很可能是因为您的http发布请求的标头选项错误。我不知道observe参数的用途是什么，但看来它只需要一个字符串值body。

第二，这不是设置HttpHeaders的方式。这就是我要做的：

const body = JSON.stringify(payload);
const requestHeaders = new HttpHeaders({'Content-Type': 'application/json', 'Authorization': token});
return this.http.post(environment.API_ENDPOINT, body, {headers: requestHeaders});

做一些检查，您的服务器端代码是否确实正确地处理了您的请求，并返回了您期望的数据。

有关添加标题的文档：https://angular.io/guide/http#adding-headers

在角度HTTPClient订阅中未执行成功回调

1 个答案: