axios的特点以及使用
(一)什么是axios1. axios是基于Promise的HTTP库2. 即可用于浏览器也可以用于node(二) axios的优点1. 支持Promise API2. 拦截请求和响应3. 转换请求数据和响应数据4. 取消请求5.自动转换json数据6. 客户端支持防御XSRF攻击(三)五种axios的请求方法:get、post、put、patch、...
(一)什么是axios
1. axios是基于Promise的HTTP库
2. 即可用于浏览器也可以用于node
var defaults.adapter = getDefaultAdapter();
function getDefaultAdapter () {
var adapter;
if (typeof XMLHttpRequest !== 'undefined') {
// 浏览器环境
adapter = require('./adapter/xhr');
} else if (typeof process !== 'undefined') {
// node环境
adapter = require('./adapter/http');
}
return adapter;
}
(二) axios的优点
1. 支持Promise API
2. 拦截请求和响应
3. 转换请求数据和响应数据
4. 取消请求
5.自动转换json数据
6. 客户端支持防御XSRF攻击
(三)五种axios的请求方法:
get、post、put、patch、delete
put/patch: 编辑、更新数据,区别如下~
put: 是要讲所有数据全部推送到后端 (一般用于更新)
patch: 只将修改的数据推送到后端
delete: 删除数据
3.1 post提交
3.1.1 form-data (图片上传、表单提交)
3.1.2 application/json (一般用这种)
(四)并发请求
并发请求:同时发送多个请求,并统一处理返回值 (比如渲染一个页面,刚开始同时调用多个接口)
(1)axios.all(), axios.spread()
all()里面是一个数组,数组里面放请求,如果接口都请求成功,才会触发.then
mounted () {
axios.all([
axios.get(url + '/city'),
axios.get(url + '/card')
]).then(
axios.spread((cityRes, cardRes) => {
console.log(cityRes)
console.log(cityRes)
})
)
}
.all里面有多少个参数,.spread的箭头函数里面也应该有多少个参数,一一对应~
(五)axios的配置
5.1 全局配置 在main.js里面 (axios.defaults)
axios.defaults.timeout = 1000 // 设置全局超时时间
axios.defaults.baseUrl = 'localhost:8080' // 设置全局baseUrl
5.2 axios请求配置
axios.get(url + '/city', {
params: {}, // 参数
timeout: 3000 // 配置
}).then((res) => {
console.log(res)
})
更多推荐
所有评论(0)