axios封装 responsetype
时间: 2023-09-06 10:03:44 浏览: 44
responsetype是axios的一个属性,用于指定服务器返回数据的类型。具体来说,它支持五种类型的值,分别是"json"、"text"、"arraybuffer"、"blob"和"document",对应不同的响应类型。
1. "json"表示服务器返回的数据是JSON格式的字符串,并将其自动转换为JavaScript对象。这是axios的默认值,一般用于处理服务器返回的JSON数据。
2. "text"表示服务器返回的数据是纯文本格式的字符串,不会进行任何转换。这个类型常用于处理普通的文本响应。
3. "arraybuffer"表示服务器返回的数据是一个二进制数组,常用于处理二进制文件,比如图片、音视频等。在接收到这种响应后,我们可以使用ArrayBuffer对象来获取二进制数据。
4. "blob"表示服务器返回的数据是一个二进制大对象,类似于arraybuffer,常用于处理二进制文件。与arraybuffer不同的是,blob对象还可以直接作为URL的参数,用于下载文件。
5. "document"表示服务器返回的数据是一个HTML文档,可以直接在前端进行解析和操作。这种类型常用于处理HTML页面的请求。
通过设置responsetype属性,我们可以根据需要指定服务器返回数据的类型,从而更加灵活地处理不同类型的响应。例如,如果我们希望以文本格式获取服务器返回的数据,可以将responsetype设置为"text",然后通过response.data来获取文本数据。
相关问题
vue封装axios responsetype
在Vue中封装axios时,可以通过设置Axios实例的responseType属性来指定响应的数据类型。在引用\[3\]中的基础配置中,可以看到Axios实例的responseType属性被设置为'json',表示响应的数据类型为JSON格式。这意味着在请求接口时,返回的数据将会以JSON格式进行解析和处理。
#### 引用[.reference_title]
- *1* *2* [20-axios的封装](https://blog.csdn.net/wk18949831618/article/details/109607656)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [Vue中axios的二次封装和使用](https://blog.csdn.net/suixishix/article/details/128861880)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
axios封装request
以下是一个常用的axios封装request的示例代码,其中包括了请求头、状态码、请求超时时间、请求方式、请求拦截器和响应拦截器等的封装:
```javascript
import axios from 'axios'
import { Message } from 'element-ui'
// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 5000 // 请求超时时间
})
// request拦截器
service.interceptors.request.use(config => {
// 在发送请求之前做些什么
config.headers['X-Token'] = 'token'
return config
}, error => {
// 对请求错误做些什么
console.log(error) // for debug
Promise.reject(error)
})
// respone拦截器
service.interceptors.response.use(
response => {
/**
* code为非20000是抛错 可结合自己业务进行修改
*/
const res = response.data
if (res.code !== 20000) {
Message({
message: res.message,
type: 'error',
duration: 5 * 1000
})
// 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// 请自行在引入 MessageBox
// import { Message, MessageBox } from 'element-ui'
MessageBox.confirm('你已被登出,可以取消继续留在该页面,或者重新登录', '确定登出', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
store.dispatch('FedLogOut').then(() => {
location.reload()// 为了重新实例化vue-router对象 避免bug
})
})
}
return Promise.reject('error')
} else {
return response.data
}
},
error => {
console.log('err' + error)// for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
```