axios是基于Promise的HTTP库,适用于各种前端框架。
不同于普通http请求后的回调,Promise有更好的操作性。
axios可以自动转换JSON数据
客户端支持防御XSRF攻击
axios的简单使用
安装
npm install axios --save
执行get请求
axios.get("http://localhost:8080/user?id=1").then(response => {
console.log(response );
}).catch(error => {
console.log(error);
})
也可以将请求的参数用另一种表达方式
axios.get("http://localhost:8080/user", {params: {id = 1}}).then(response => {
console.log(response );
}).catch(error => {
console.log(error);
})
执行post请求
axios.post("http://localhost:8080/user", {username: "name"},opt).then(response => {
console.log(response);
}).catch(error => {
console.log(error);
})
执行put请求
axios.put("http://localhost:8080/user", {username: "name"},opt).then(response => {
console.log(response);
}).catch(error => {
console.log(error);
});
执行delete请求
axios.delete("http://localhost:8080/user",{params:{id}}).then(response => {
console.log(response);
}).catch(error => {
console.log(error);
});
在post请求和put请求中,会有后台获取不到数据的情况,主要的原因有:
- 请求的的Content-Type 为application/json格式
- axios会自动将数据转换为json
我使用的Java后台服务希望得到的是Content-Type: application/x-www-form-urlencoded请求,很明显这样是使用@RequestParam是获取不到参数的
有几种解决方法
第一种
使用axios中自带的Qs来包裹请求的参数,添加了axios模块,Qs直接引入就可以使用
import Qs from 'qs';
axios.post("http://localhost:8080/user",Qs.stringify({username: "name"}),opt).then(response => {
console.log(response);
}).catch(error => {
console.log(error);
})
这样就能正常的获取到参数,content-type变为application/x-www-urlencoded
第二种
使用URLSearchParams
const param = new URLSearchParams();
param.append('username', 'name')
axios.post(url, data).then(response => {
console.log(response);
}).catch(error => {
console.log(error);
})
第三种
在Java服务中,获取参数的方式采用@RequestBody注解
axios api
可以通过向axios传递相关的配置参数创建请求
axios(config)
config: {
//用于请求的服务器 URL
url,
//创建请求时使用的方法
method,
//将自动加在 `url` 前面,除非 `url` 是一个绝对 URL
baseURL,
//允许在向服务器发送前,修改请求数据
//只能用在post,put,patch请求方法
transformRequest,
//在传递给 then/catch 前,允许修改响应数据
transformResponse,
//允许自定义请求头
headers,
//与请求一起发送的URL参数
params,
//将params序列化的函数
paramsSerializer,
//作为请求体发送的数据
data,
//指定超时的毫秒数
timeout,
//表示跨域请求时是否需要使用凭证,默认false
withCredentials,
//允许自定义处理请求
adapter,
//应该使用 HTTP 基础验证,并提供凭据
auth,
//服务器响应的数据类型,默认'json'
responseType,
//xsrf token 的值的cookie的名称
xsrfCookieName,
//xsrf token 的值的http头的名称
xsrfHeaderName,
//允许为上传处理进度事件
onUploadProgress,
//允许为下载处理进度事件
onDownloadProgress,
//定义允许的响应内容的最大尺寸
maxContentLength,
//定义对于给定的HTTP 响应状态码是 resolve 或 reject promise,默认status >= 200 && status < 300;
validateStatus,
//定义在 node.js 中 follow 的最大重定向数目。设置为0,将不会 follow 任何重定向
maxRedirects,
//定义在执行 http 和 https 时使用的自定义代理,`keepAlive` 默认false
httpAgent,
httpsAgent,
//代理服务器的主机名称和端口
proxy:{
host: '127.0.0.1',
port: 9000
},
//指定用于取消请求的 cancel token
cancelToken
}
响应结构
{
//由服务器提供的响应
data: {},
//来自服务器响应的 HTTP 状态码
status: 200,
//来自服务器响应的 HTTP 状态信息
statusText: 'OK',
// 服务器响应的头
headers: {},
// 是为请求提供的配置信息
config: {}
}
配置默认值
可以通过defaults来配置全局axios的默认配置
axios.defaults.baseURL='http://localhost'
创建自定义实例
var server = axios.create({
baseURL:'http://localhost'
})
server.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
拦截器
// 添加请求拦截器
axios.interceptors.request.use(config => {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(response => {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
//自定义axios实例添加拦截器
var server = axios.create()
server.interceptors.request.use(config => {})
参考:
https://www.kancloud.cn/yunye/axios/234845
https://blog.csdn.net/csdn_yudong/article/details/79668655#1_25