axios是前端最火的,专注于数据请求的库,有官方文档
1.特点
-
从浏览器创建 XMLHttpRequests
-
从 node.js 创建 http 请求
-
支持 Promise API
-
拦截请求和响应
-
转换请求和响应数据
-
取消请求
-
自动转换JSON数据
-
客户端支持防御[XSRF]
2.使用
1.下载并引用
已经下载到js文件夹里,通过script标签引入,axios官方文档。
2.语法
// 获取远端图片 axios({ method:'get', //请求的方式 url:'http://t.ly/2nY', //请求的url地址 responseType:'stream' }) .then(function(response) { response.data.pipe(fs.createWriteStream('ada_lovelace.jpg')) });
前面整体得到promise对象,response是请求成功后的结果,then是请求成功之后的回调函数,函数作为参数
只要使用script引入axios文件,就可以console输出axios。
3.axios发起get请求
1.请求所有数据
console.log(axios) //ƒ (){return e.apply(t,arguments)} // 请求所有的数据 axios({ method:'GET', url:"http://www.getbooks" }) .then(result=>{ console.log(result.data) })
控制台看输出,data 就是返回的数据,
真正想得到数据,就使用response.data 就会具体显示全部数据内容
2.查询部分数据
如果加入查询条件,指定查询的条件
代码里加入查询的参数
params id:261
意思是只查询id是261的数据,network里就会 变成getbooks?id=1
本质:
在使用ajax发起GET请求的参数,会以 ?键名=值&键名=值的形式拼接到URL地址的末尾,还可以改写为直接在url地址后面加上id=1这样的键值对,但是url地址值中不允许出现中文空格等字符,因为浏览器会自动进行格式转换,会乱码
所以中文时尽量采用参数查询,都会自动解析
5.get和post的区别
-
get请求只能在url中携带少量的数据,能在浏览器上看到,所以不安全
-
post请求适合用来大量的数据,post为了提交大量的数据,所以没有把数据拼接到url的末尾,而是放到独立的请求体中。就是在检查的header里。浏览器看不到,所以安全。
请求体在哪?
在检查的network,然后左边的name就是url地址按顺序排列,找到最后一个reg,点击,就能进入headers,preview,response.....,在headers里的最后一个payload就是请求体,还有url地址,404问题肯定是接口问题,会报错。