Ajax常用封装库——Axios的使用

Axios 是目前应用最为广泛的 AJAX 封装库

Axios的特性有：

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

使用axios时，需要通过使用script标签引入：https://unpkg.com/axios/dist/axios.min.js
axios的中文网链接：Axios中文网

Axios API

向axios（）传递相关配置来创建请求；

• axios（对象格式的配置选项）
• axios（url，config）

常用的配置项

• url：用于请求的服务器URL
• method：创建请求时使用的方法
• baseURL：传递相对URL前缀，将自动加在url前面
• headers：即将被发送的自定义请求头
• params：即将与请求一起发送的URL参数
• data：作为请求主体被发送的数据
• timeout：指定请求超时的毫秒数（0表示无超时时间）
• responseType：表示服务器响应的数据类型，默认“json”

1 2 3 4 5 6

axios（）.then(function(response){  //正常请求的响应信息对象response }) .catch(function(error){  //捕获的错误 })

代码展示如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script>  //使用axios方法    post请求 axios({          url:"/pinglun",          method:"post",          baseURL:"http://localhost:3000",          header:{                "Content-Type":"application/json"          },         data:{             "content":"well",             "lyId":4          },     timeout:1000,   }).then(function(res){        console.log(res.data);    }).catch(function(error){        console.log(error); })  </script>

axios 全局默认值的配置

1 2	axios.defaults.baseURL = 'https://xxx.xxx.com'; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencode'

axios拦截器：在请求或响应被then或catch处理前拦截它们

axios 的请求拦截器

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

//axios 的请求拦截器 axios.interceptors.request.use(function(config){  //配置项config   config.params = {         id:2 //对配置项中的params进行更改，筛选id=2     }    return config;//要有返回值 })       //axios 方法 axios("http://localhost:3000/liuyan") .then(function(res){       console.log(res.data);  }) .catch(function(error){       console.log(error); })       //axios 方法 axios("http://localhost:3000/pinglun") .then(function (res) {     console.log(res.data); }) .catch(function (error) {      console.log(error); }) //多个axios方法也可以拦截

axios 的响应拦截器

1 2 3 4 5 6 7 8 9 10 11 12 13

//axios 的响应拦截器 axios.interceptors.response.use(function(response){      return(response.data);//response里有很多值，选择data即可 })       //axios 方法 axios("http://localhost:3000/liuyan") .then(function (res) {       console.log(res);//response那里拦截了，已经将数据传成data了 }) .catch(function (error) {      console.log(error); })

axios的快速请求方法

 axios.get(url[,config])

1 2 3 4 5 6 7 8 9 10 11 12 13 14

//axios.get(url[,config])       axios.get("http://localhost:3000/liuyan?id=2")  .then(function(res){      console.log(res.data); })       axios.get("http://localhost:3000/liuyan",{    params:{         id:1    } }).then(function(res){     console.log(res.data); })

 axios.post(url[,data[,config]])

1 2 3 4 5 6

//axios.post(url[,data[,config]]) , post请求，添加数据 axios.post("http://localhost:3000/users",{     name:"laowang",     age:23,     class:1 })

 axios.delete(url[,config])

1 2 3 4 5 6

//axios.delete(url[,config]) axios.delete("http://localhost:3000/liuyan",{    params:{          id:5     } })

 axios.put(url[,data[,config]])

1 2 3 4 5

//axios.put(url[,data[,config]]) axios.put("http://localhost:3000/liuyan",{     name:"wangshisan",     id:11 })

XMLHttpRequest2.0，html5对XMLHttpRequest类型全面升级，使其变得更加易用、强大。

onload / onprogress

  XML.onload 事件：只在请求完成时触发

  XML.onprogress 事件：只在请求进行中触发

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

//xhr.onload事件：只在请求完成时触发 //xhr.onprogress事件：只在请求进行中触发 var xhr = new XMLHttpRequest(); xhr.open("get","http://localhost:3000/pinglun"); xhr.onload = function(){      console.log("load:",this.readyState); }; xhr.onprogress = function(e){     console.log("progress:",this.readyState);     //在周期性请求过程中，接收到的数据个数      console.log(e.loaded);      //接收数据的总个数      console.log(e.total); } xhr.send(null);

response属性

  以对象的形式表述响应体，其类型取决于responseType的值。根据responseType的值，来通过特定的类型请求数据。

  responseType要在调用open（）初始化请求之后，在调用send（）发送请求到服务器之前设置才会有效。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

//XMLHttpRequest之前的response返回 //responseText // responseXml var xhr = new XMLHttpRequest(); xhr.open("get","http://localhost:3000/pinglun"); xhr.onload = function(){   var data = JSON.parse(this.responseText);           console.log(data);    } xhr.send(null);              // xhr2.0新增的response属性 // response // responseType var xhr = new XMLHttpRequest(); xhr.open("get","http://localhost:3000/liuyan"); xhr.responseType = "json"; xhr.onload = function(){     console.log(this.response); } xhr.send(null)