axios的使用
官网:https://github.com/axios/axios
一、发送ajax请求
练习阶段采用链接引入方式:https://www.bootcdn.cn/axios/
1、axios调用的返回值是一个Promise对象,其成功的结果值就是响应值
2、成功的形参叫response,失败的形参叫error
3、axios发送请求成功的值是一个封装好的响应对象:
我们想要的响应数据其实藏在response.data
中。
4、携带query参数时,配置项名字叫params
5、携带params参数没有配置项,只能拼接在url中(所以axios好像更推荐带query)
1.axios函数发送通用请求
注意这里params传的是query参数,只是名字叫params
ajax.onclick = function() {
// 通用请求
axios({
//请求方法
method: 'POST',
//url
url: 'https://ku.qingnian8.com/dataApi/news/navlist.php',
//url参数,传的是query类型参数,只是名字叫params
params: {
a:1,b:2},
//请求头信息(一般用来携带token)
headers: {
token: 'xcv6s8g6875f7sa6f87a6s76'},
//请求体参数(json编码)
data: {
username: 'zzy',password: '123'},
//data: `username=zzy&password=123`, //请求体参数(urlencoded编码)
//超时时间2秒
timeout:2000
}).then((response) =>{
console.log('全部响应结果:',response);
console.log('响应状态码:', response.status);
console.log('响应状态字符串:',response.statusText);
console.log('响应头信息:', response.headers);
console.log('响应体:', response.data);
})
}
2.精简版GET请求
写法和DELETE请求(删除)类似,都不用携带请求体参数
get.onclick = function() {
//GET请求
axios.get('https://ku.qingnian8.com/dataApi/news/navlist.php',{
//url参数(query参数)
params: {
a:1