前端Axios
创建实例
const instance = axios.create({
baseURL: '',
timeout: 1000,
headers: {
}
});
请求配置
instance({
url: '/user',
method: 'get',
// `transformRequest` 允许在向服务器发送前，修改请求体或请求头
// 它只能用于 'PUT', 'POST' 和 'PATCH' 这几个请求方法
transformRequest: [(data, headers) => {
// 对发送的 data 进行任意转换处理
return data;
}],
// `transformResponse` 在传递给 then/catch 前，修改响应体
transformResponse: [(data) => {
// 对接收的 data 进行任意转换处理
return data;
}],
// 自定义请求头
headers: {
},
// `params` 是与请求一起发送的 URL 参数
// 必须是一个简单对象或 URLSearchParams 对象
params: {
},
// `data` 是作为请求体被发送的数据
// 仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法
data: {
},
// `timeout` 指定请求超时的毫秒数。
// 如果请求时间超过 `timeout` 的值，则请求会被中断
timeout: 1000,
// `auth` HTTP Basic Auth
auth: {
username: 'janedoe',
password: 's00pers3cret'
}
})
响应结构
{
// `data` 由服务器提供的响应
data: {
},
// `status` 来自服务器响应的 HTTP 状态码
status: 200,
// `headers` 是服务器响应头
// 所有的 header 名称都是小写，而且可以使用方括号语法访问
headers: {
},
// `config` 是 `axios` 请求的配置信息
config: {
},
// `request` 是生成此响应的请求
// 在node.js中它是最后一个ClientRequest实例 (in redirects)，
// 在浏览器中则是 XMLHttpRequest 实例
request: {
}
}
拦截器
// 添加请求拦截器
axios.interceptors.request.use((config) => {
// 在发送请求之前做些什么
return config;
},(error) => {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use((response) => {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
}, (error) => {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});