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

这篇文章主要介绍了Ajax常用封装库――Axios的使用，帮助大家更好的理解和学习网络编程，感兴趣的朋友可以了解下

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”

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

代码展示如下：

axios 全局默认值的配置

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

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

axios 的请求拦截器

 //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 的响应拦截器

 //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])

 //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]])

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

axios.delete(url[,config])

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

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

 //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 事件：只在请求进行中触发

 //xhr.onload事件：只在请求完成时触发 //xhr.onprogress事件：只在请求进行中触发 var xhr = new XMLHttpRequest(); xhr.open("get","http://localhost:3000/pinglun"); xhr.onload以上就是Ajax常用封装库――Axios的使用的详细内容，更多请关注易知道|edz.cc其它相关文章！