Angular 2+ Http post请求responseType blob不显示服务器返回的json错误 - 腾讯云开发者社区

大多数前端应用程序需要通过 HTTP 协议与服务器通信，以下载或上传数据并访问其他后端服务，SAP 电商云 Spartacus UI 也不例外。...Angular 为 Angular 应用程序提供了一个客户端 HTTP API，即开发包 @angular/common/http 中的 HttpClient 服务类。...请求类型化响应对象(typed response objects)的能力简化的错误处理可测试性特征请求和响应拦截下图是 Spartacus OCC Adapter 实现中对 HTTPClient...异步方法发送一个 HTTP 请求，并在客户端真正收到服务器端返回的响应时，返回一个能够发出(emit)被请求数据(requested data)的 Observable。...: boolean, responseType?: 'arraybuffer'|'blob'|'json'|'text', withCredentials?

2.3K2 0

【Hybrid开发高级系列】AngularJS(二)——常用$服务

/43124679 1.4.1 简介 angular提供了http服务来同服务端进行通信，http服务队浏览器的XMLHttpRequest对象进行了封装，让我们可以以ajax的方式来从服务器请求数据..., JSONP, POST, PUT url: 字符串，请求的目标 params: 字符串或者对象，会被转换成为查询字符串追加的url后面 data: 在发送post请求时使用，...cache: 布尔类型或者缓存对象，设置之后angular会缓存get请求。 timeout: 数值，延迟请求 responseType：字符串，响应类型。...可以为arraybuffer, blob, document, json, text, moz-blob, moz-chunked-text, moz-chunked-arraybuffer 1.4.3...$scope.names = response; }).error(function(data){ //错误代码 }); 1.4.8 $http post实例 $http post实例

3634 0

您找到你想要的搜索结果了吗？

是的

没有找到

前端文件下载汇总「案例讲解」

在模版文件 index.ejs 中，我们请求了文件接口 http://localhost:3000/download/file，并获取到了返回的内容。...数据的类型可以是 ArrayBuffer, Blob, Document, JS 对象，字符串等，这取决于 responseType 设置什么值 responseType 指定响应的类型。...可以解答了：在上面，我们设置了request.responseType = 'blob' 的接口。...结合 angular 使用 axios 在 react 和 vue 框架开发的时，用的比较频繁。笔者使用的 angular 框架来开发，其中集成了 @angular/common/http 模块。...，自动唤起浏览器下载使用原生 XMLHttpRequest 处理请求，让我们知道文件下载的前后发生了什么；使用 axios 和 @angular/common/http 能让我们更好管理和快速开发。

1491 0

Angular 6 HttpClient 快速入门

本教程将介绍如何在 Angular 6.x 中使用 HttpClient 发送 Http 请求，如 get、post、put 和 delete 请求。...在 Angular 4.3+ 版本之后引入了 HttpClientModule 模块，该模块提供的 HttpClient 服务是已有 Angular HTTP API 的演进，它在一个单独的 @angular...每当调用 set() 方法，将会返回包含新值的 HttpParams 对象，因此如果使用下面的方式，将不能正确的设置参数。...=> { console.dir("Response: " + res.status); }); 设置响应类型如果你期望的响应对象的格式不是 JSON，你可以通过 responseType 属性来设定响应类型...(text => { console.log("Response: " + text); }); 需要注意的是除了支持 json 和 text 类型外，还支持 arraybuffer 和 blob

5K3 0

使用Promise封装一个 Ajax

，包含低版本浏览器实现的兼容操作等；函数的使用，包含回调，传递，执行等； XMLHttpRequest 实现请求函数封装首先， XMLHttpRequest （XHR）对象可以与服务器交互。...XMLHttpRequest.response 只读返回一个 ArrayBuffer、Blob、Document，或 DOMString，具体是哪种类型取决于 XMLHttpRequest.responseType...XMLHttpRequest.responseText 只读返回一个 DOMString，该 DOMString 包含对请求的响应，如果请求未成功或尚未发送，则返回 null。...XMLHttpRequest.status 只读返回一个无符号短整型（unsigned short）数字，代表请求的响应状态。...XMLHttpRequest.statusText 只读返回一个 DOMString，其中包含 HTTP 服务器返回的响应状态。

1.9K1 1

dart系列之:浏览器中的舞者,用dart发送HTTP请求

HTTP资源的请求，也就是AJAX请求。...发送GET请求虽然现代的web APP被各种框架所封装，但是归根结底他还是一个AJAX的富客户端应用。我们通过各种异步的HTTP请求向服务器端请求数据，然后展示在页面上。...请求 GET是从服务器拉取数据，相应的POST就是通用的向服务器中提交数据的方法。...所以直接使用他获取返回内容即可。更加通用的操作上面我们讲解了get和form的post，从代码可以看到，他们底层实际上都调用的是request方法。request是一个更加通用的HTTP请求方法。...responseType表示的是HttpRequest.responseType,是返回对象的格式，默认情况下是String，也可以是’arraybuffer’, ‘blob’, ‘document’,

8023 0

Angular 从入坑到挖坑 - HTTP 请求概览

HttpClient 默认的返回信息格式都是 json 对象，在后端接口返回的并不是 json 对象的情况下，需要手动的设置响应类型（text、blob、arraybuffer...） import {...而在组件处仅显示错误提示在服务中定义一个错误处理器，用来处理与后端请求中发生的错误 import { Injectable } from '@angular/core'; import { Observable...} else { // 服务端返回的错误信息 console.error(`服务端错误：HTTP 状态码：${error.status} \n\r 错误信息：${JSON.stringify...; } } 当请求发生错误时，通过在 HttpClient 方法返回的 Observable 对象中使用 pipe 管道将错误传递给自定义的错误处理器，从而完成捕获错误信息的后续操作 ?...4.3、请求和响应拦截在向服务器发起请求时，一般是需要我们在请求头中添加上授权的 token 信息，与其当后端接口返回我们无权访问时再来处理，是不是可以在发起请求前去进行拦截判断，如果不包含 token

5.2K1 0

axios介绍与使用说明 axios中文文档

` 允许在向服务器发送前，修改请求数据 // 只能用在 "PUT", "POST" 和 "PATCH" 这几个请求方法 // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或..." }, // `responseType` 表示服务器响应的数据类型，可以是 "arraybuffer", "blob", "document", "json", "text", "stream..." responseType: "json", // 默认的 // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称 xsrfCookieName:...： { // `data` 由服务器提供的响应 data: {}, // `status` HTTP 状态码 status: 200, // `statusText` 来自服务器响应的...HTTP 状态信息 statusText: "OK", // `headers` 服务器响应的头 headers: {}, // `config` 是为请求提供的配置信息 config

66.2K10 2

JS 中的网络请求 AJAX, Fetch, WebSocket

AJAX 是 Asynchronous JavaScript And XML 的简称，它可以让页面在不刷新的情况下从服务器获取数据。...在发送请求时会有个Origin头表示请求页面的源信息，如果服务器返回的Access-Control-Allow-Origin中有相同的源信息或是* 那么就可以跨域请求信息，请求和响应都不包含cookie...CORS通过Preflighted Requests透明服务器验证机制支持使用自定义头部、get和post之外的方法，不同类型的主题内容。...服务器如果接收请求会返回Access-Control-Allow-Credentials 为true的头信息。还有一种方法是使用JSONP。...': 'application/json' }, // 头信息 body: JSON.stringify({data: 1}), // 请求的 body 信息，Blob, FormData

4K3 0

XMLHttpRequest

响应体开始接收但未完成 4 Loaded HTTP 响应已经完全接收 ☞ status 由服务器返回的 HTTP 状态代码，如 200 表示成功，而 404 表示 “Not Found” 错误。...☞ response 该属性只读表示服务器返回的数据体，可能是任意的数据类型，比如字符串，对象，二进制对象等，具体类型由responseType 属性决定。...☞ responseType 表示服务器返回数据的类型，这个属性是可写的，在 open 之后，send 之前，告诉服务器返回指定类型的数据。...如果 responseType 设为空字符串，就等同于默认值 text 表示服务器返回文本数据；arraybuffer 表示服务器返回二进制数组；blob 表示返回二进制对象；document 返回一个文档对象...要特别注意，当这个方法调用的时候，实现通常不会打开一个到 Web 服务器的网络连接。参数说明 ① method 参数是用于请求的 HTTP 方法。值包括 GET、POST。

1.4K4 0

axios2教程

axios axios 是一个基于 promise 的 HTTP 库，用于浏览器和node.js的http客户端，支持拦截请求和响应，自动转换 JSON 数据，客户端支持防御 XSRF。...', 'document', 'json', 'text', 'stream' responseType: 'json', // 默认值是json // `xsrfCookieName` cookie...// 这允许像“keepAlive”这样添加选项，而这些选项在默认情况下是不启用的。...// “proxy”定义代理服务器的主机名和端口，用‘false’禁用代理，忽略环境变量。...Angular的$http服务 .

3.1K3 1

XMLHttpRequest使用指南大全

xhr.timeout = 3000; //设置响应返回的数据格式 xhr.responseType = "text"; //创建一个 post 请求，采用异步 xhr.open(...” String字符串 “document” Document对象希望返回 XML 格式数据时使用 “json” javascript 对象存在兼容性问题，IE10/IE11不支持 “blob”...在不限制超时的情况下，有可能同步请求一直处于pending状态，服务端迟迟不返回响应，这样整个页面就会一直阻塞，无法响应用户的其他交互。...一旦程序抛出错误，如果不 catch 就无法继续执行后面的代码，所以调用 xhr.send(data)方法时，应该用 try-catch捕捉错误。...这样的判断是有坑儿的，比如当返回的http状态码不是200，而是201时，请求虽然也是成功的，但并没有执行成功回调逻辑。所以更靠谱的判断方法应该是：当http状态码为2xx或304时才认为成功。

1.3K3 0

前端怎么通过二进制流下载文件

', zip: 'application/zip'}设置环境BASE_APIconst baseUrl = process.env.VUE_APP_BASE_API请求下载设置responseType...responseType:blob，文件会下载，但是打不开；文件不能下载，报code:500 MIME类型设置错误，打开xlsx文件出现Object Object或者undefined undefinedres.data...补充：前端axios设置了responseType:blob时，接收到数据就是blob，但是当文件导出失败时,返回的类型是json（为什么是json，后端异常处理一般都是response.setContentType...msg}= JSON.parse(reader.result); //处理错误this....=function(){try(){//如果JSON.parse(reader.result)不报错，则返回的是json,否则返回的是二进制流，进入catch,下载文件 if（JSON.parse(

2801 0

vue下载excel以及自适应表格宽度（前后端）

axios .get(`/api/audit/export`, { responseType: "blob" //服务器响应的数据类型，可以是 'arraybuffer', 'blob...axios .get(`后端接口链接`, { responseType: "blob" //返回的数据类型 }) .then((res) => { fileDownload(res.data,..."test111.xlsx"); }); post 请求 formData.value.pageNum = 1; formData.value.pageSize = 200; axios .post...(`后端接口链接`, formData.value, { responseType: "blob" //返回的数据类型 }) .then((res) => { fileDownload(res.data...PS：适当增加宽度，能避免数字显示为 * 的问题；避免时间显示为 # 的问题 import com.alibaba.excel.enums.CellDataTypeEnum; import com.alibaba.excel.metadata.Head

1.7K2 0

Angular如何对包含了HTTP请求的服务类进行单元测试

本文使用到的所有代码在Github这个文件夹下面： https://github.com/wangzixi-diablo/angular-sandbox/blob/master/src/app/ngrxdemo...HttpTestingController.expectOne：期望一个基于传入参数url的HTTP请求已经被发起，并且返回其mock. ? 我们可以基于mockReq进行各种断言处理。...expect(mockReq.cancelled).toBeFalsy(); 确认该请求没有被cancel expect(mockReq.request.responseType).toEqual...(‘json’); 确保响应类型是JSON mockReq.flush(mockUsers) 使用flush传入的参数作为HTTP请求的返回参数： ?...真的调用到service的getData代码里了： ? 此时event.type = 0： ? (2) 拿到HTTP请求的mock对象： ? ? 准备flush： ?

3K1 0

axios实现跨域三种方法_vue跨域配置

})); 请求配置 { // `url` 是用于请求的服务器 URL url: '/user', // `method` 是创建请求时使用的方法 method: 'get', // 默认是 get...` 允许在向服务器发送前，修改请求数据 // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法 // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream...` 表示跨域请求时是否需要使用凭证 withCredentials: false, // 默认的 // `adapter` 允许自定义处理请求，以使测试更轻松 // 返回一个 promise 并应用一个有效的响应...: 'janedoe', password: 's00pers3cret' }, // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document...', 'json', 'text', 'stream' responseType: 'json', // 默认的 // `xsrfCookieName` 是用作 xsrf token 的值的cookie

3.4K2 0

jQuery深入——动画、常用工具、JSON、Ajax

可通过 HTTP 状态码判定服务端是否成功响应数据 1) 响应正常 200 2) 请求错误 4XX 3) 服务器错误 5XX 4) 重定向 301 5) HTTP 缓存命中 304 Demo <body...Method 和 URL 第三个参数设置为 false 可实现同步数据请求 send 方法调用 send 方法后才会发起请求 POST 的数据需要通过 send 方法发送除字符串之外还可以发送复杂类型数据...也为 0 upload 属性返回一个 XMLHTTPRequestUpload 对象可通过绑定事件侦听上传过程 responseType 属性设置响应内容的格式类型，默认字符串可设置多种格式：...json、blob、arraybuffer 等设置后会影响 response 的值 response 属性响应的正文内容默认为字符串，但会被 responseType 影响 5、XHR2.0的CORS...cookie 简单请求与复杂请求复杂请求会先发送一次 OPTIONS 方法的预检请求简单请求需要同时满足的条件：请求 Method 必须为 HEAD、GET、POST 之一请求头中的字段不超过

1.4K1 0

你真的会使用XMLHttpRequest吗？

xhr.timeout = 3000; //设置响应返回的数据格式 xhr.responseType = "text"; //创建一个 post 请求，采用异步 xhr.open('POST..." String字符串 "document" Document对象希望返回 XML 格式数据时使用 "json" javascript 对象存在兼容性问题，IE10/IE11不支持 "blob" Blob...在不限制超时的情况下，有可能同步请求一直处于pending状态，服务端迟迟不返回响应，这样整个页面就会一直阻塞，无法响应用户的其他交互。...一旦程序抛出错误，如果不 catch 就无法继续执行后面的代码，所以调用 xhr.send(data)方法时，应该用 try-catch捕捉错误。...这样的判断是有坑儿的，比如当返回的http状态码不是200，而是201时，请求虽然也是成功的，但并没有执行成功回调逻辑。所以更靠谱的判断方法应该是：当http状态码为2xx或304时才认为成功。

1.5K3 0

Axios基本使用

: application/json;charset=UTF-8 * 请求正文为Request Payload，格式是json格式的字符串 * 用@RequestParam是接收不到参数的，只能用@...` 允许在向服务器发送前，修改请求数据 // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法 // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或..., // 默认的 // `adapter` 允许自定义处理请求，以使测试更轻松 // 返回一个 promise 并应用一个有效的响应 adapter: function (config)...`responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream' responseType...https.Agent({ keepAlive: true }), // 'proxy' 定义代理服务器的主机名称和端口 // `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据

1.8K3 1

一比一还原axios源码（二）—— 请求响应处理

第二，post的请求还没实现。而处理拿到的response实际上就是处理响应体和响应头。实现post请求，实际上就是实现请求体和请求头。今天我们就来实现这四个点的内容。　　...方法，来把post请求中的data参数的对象，转换成JSON字符串，因为这里的data是一个对象，send方法是不接受对象的，所以我们要转换成字符串，也就是文档中的USVString 类型。...二、响应头和响应体的处理　　上面第一小节，我们已经可以发起带body的请求，并且服务器也能根据request header正确的解析了，下面我们要做的就是来处理返回的数据。...那么在实际的代码中呢，我们实现了发起ajax请求的一条主线，也就是从请求发起，到响应返回的过程，并且在过程中，由于json的特殊性，对此还进行了相应头字段和body的转换，再有一个实用的buildURL...但是在服务器端的http请求中，get是可以传递body的。　　另外一个思考题：get和post请求有啥区别？

7486 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

Angular HTTPClient API 在 SAP 电商云中的使用

【Hybrid开发高级系列】AngularJS(二)——常用$服务

前端文件下载汇总「案例讲解」

Angular 6 HttpClient 快速入门

使用Promise封装一个 Ajax

dart系列之:浏览器中的舞者,用dart发送HTTP请求

Angular 从入坑到挖坑 - HTTP 请求概览

axios介绍与使用说明 axios中文文档

JS 中的网络请求 AJAX, Fetch, WebSocket

XMLHttpRequest

axios2教程

XMLHttpRequest使用指南大全

前端怎么通过二进制流下载文件

vue下载excel以及自适应表格宽度（前后端）

Angular如何对包含了HTTP请求的服务类进行单元测试

axios实现跨域三种方法_vue跨域配置

jQuery深入——动画、常用工具、JSON、Ajax

你真的会使用XMLHttpRequest吗？

Axios基本使用

一比一还原axios源码（二）—— 请求响应处理

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐