一,网络请求发展史
要学习axios首先应该了解前端ajax请求的大致发展。
1. 传统的Ajax
传统的Ajax请求是基于XMLHttpRequest
(XHR)对象。可以直接使用。但是使用起来配置较为麻烦,实际开发中使用非常少,在MVC时代通常使用的是JQuery-Ajax。相对于传统的Ajax现在使用更多的是Fetch
请求。
2. JQuery-Ajax
JQuery-Ajax在前端JQuery时,因为JQuery的强大兼容性在项目开发中$Ajax
使用非常广泛,需要引入JQuery库,其底层原理也是对传统的Ajax,XHR对象进行封装。但是在前端框架MVVC时代,例如使用vue搭建项目,如果再继续使用$Ajax
就还需再单独引入JQuery重量级1w+代码量的库是得不偿失的。所以针对于框架的网络请求应运而生。
3.axios
在Vue1.0时代,官方推出了Vue-resource
,其体积相对于JQuery小的多,但是在Vue2.0时代官方宣布不再更新,那么继续使用Vue-resource
就会存在版本无法匹配问题。因此在Vue2.0时代开始,官方推荐使用axios
作为新一代的Ajax库。axios
其优点:在浏览器中发送XMLHttpRequest请求、在node中发送http请求、支持Promise API、拦截请求和相应、转换请求和响应数据等,这里不再一一描述,想进一步了解其优点,可以查询相关资料。
二,axios安装
先来看看axios的基本使用,本篇介绍axios的使用是与vue项目结合起来的,首先在命令行中输入npm create vue
创建vue项目。其次,axios是一个第三方Ajax库,需要单独安装和引入,在命令行中输入npm install axios --save-D
安装axios的依赖包。接着,在需要使用的地方引入axios对象import axios from axios
,在实际开发中,通常会单独建立一个js文件引入axios引入再进行封装,下文会介绍。
三,axios基本使用
axios请求方式
先来看看axios具体有哪些请求方式:
- axios(config)
- axios.request(config)
- axios.get(url[, config])
- axios.delete(url[, config])
- axios.head(url[, config])
- axios.post(url[, data[, config]])
- axios.put(url[, data[, config]])
- axios.patch(url[, data[, config]]) axios(config)请求方式: axios接收一个对象,在对象中使用
键值对
方式写入配置信息,get请求下,默认method可以不写。
axios({
url:'http://123.207.32.32:8000/home/multidata',
params:{
type:'pop',
page:1
}
}).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
axios.request(config)请求方式: 与axios(config)写法一致,都是接收一个对象,在对象中使用键值对
方式配置信息。
axios.request({
url:'http://123.207.32.32:8000/home/multidata'
}).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
axios.get(url[, config])请求方式 :限定method为get请求,网络请求中get请求是将参数拼接搭配url上发送的请求,在axios请求中则可以使用params
属性配置将传递的参数拼接到url上。params
属性是一个对象,其传递的参数使用键值对
形式书写
axios.get('http://123.207.32.32:8000/home/multidata',{
params:{
type:'pop',page:1
}
}).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
axios配置
常见配置项
- 请求地址:
url: '/user'
- 请求类型:
method: 'get'
- 请根路径:
baseURL: 'http://www.mt.com/api'
- 请求前的数据处理:
transformRequest:[function(data){}]
- 请求后的数据处理:
transformResponse: [function(data){}]
- 自定义的请求头:
headers:{'x-Requested-With':'XMLHttpRequest'}
- URL查询对象:
params:{ id: 12 },
- 查询对象序列化函数:
paramsSerializer: function(params){ }
- request body:
data: { key: 'aa'}
- 超时设置:
timeout: 1000,
- 跨域是否带Token:
withCredentials: false
- 自定义请求处理:
adapter: function(resolve, reject, config){}
- 身份验证信息:
auth: { uname: '', pwd: '12'}
- 响应的数据格式json / blob /document /arraybuffer / text / stream:
responseType: 'json'
全局配置
第三方框架通过import axios from axios
引入axios属于全局的axios。使用default
关键字可以对axios进行一个配置。那么所有的axios请求都会携带default预先定义好的默认设置。对于公共的请求配置可以抽离出来,例如:请求超时时间、服务器地址、设置请求头等
语法格式:axios实例.default.配置项
// axios.defaults.配置项===》axios全局配置
axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000
axios.defaults.headers['X-TOKEN'] = '123xxx'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.responseType = 'blob'
axios('home/multidata',
{
params: {
type: 'pop',
page: 1
}
}
).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
axios并发请求
有时候存在这样一种情况:同时发送多个请求,并且等到多个请求完成响应并拿到响应内容时候才会返回。这个时候就需要使用到并发请求。
axios.all()
本质上就是promise.all()。axios.all()
接收一个Array数组作为参数,每个参数成员就是要发送的axios请求体,axios.all()函数返回一个promise实例,通过.then方法接收响应的数据,并且响应的数据也包裹在一个Array数组中, 每个数组成员对应响应的请求结果。可以通过axios.spread()
函数将返回的数组[res1,res2]展开为,res1,res2。注意,并发请求如果有一个单独的请求失败,那么axios.all()函数整个请求就会报错,通过.catch()方法拿到报错信息。
axios.all([
axios.get('http://123.207.32.32:8000/home/multidata', { params: { type: 'pop', page: 1 } }),
axios({ url: 'http://123.207.32.32:8000/home/multidata', params: { type: 'pop', page: 1 } })
]).then(res => {
console.log(res) // 返回的是数组包裹的响应信息[res1,res2]
}).catch(err=>{
console.log(err)
})
axios.all([
axios.get('http://123.207.32.32:8000/home/multidata', { params: { type: 'pop', page: 1 } }),
axios({ url: 'http://123.207.32.32:8000/home/multidata', params: { type: 'pop', page: 1 } })
]).then(axios.spread((res1,res2) => { // 使用axios。spread展开数组
console.log(res1)
console.log(res2)
})).catch(err=>{
console.log(err)
})