axios与ajax

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问题肯定是接口问题，会报错。