Vue与axios
· 阅读需 7 分钟
异步调用
- 异步效果
- 定时任务
- AJAX
- 事件函数
- 多次异步调用的依赖分析
- 多次异步调用的结果顺序不确定
- 异步调用结果如果存在依赖需要嵌套（会导致 => 回调地狱）
Promise
异步编程的解决方案，Promise 是一个对象，获取异步操作的消息
- 避免多层异步调用嵌套问题（回调 地狱）
- Promise 对象提供了简洁的 API，使得控制异步操作更加简单
返回值： 使用 Promise 可以返回 Promise对象或者直接返回数据
- 如果返回 Promise 对象，则由该 Promise 对象调用下一个then
- 如果直接返回 普通值，则默认产生一个新的 Promise 对象去调用下一个then
<script>
// 1. 处理原生 AJAX
function queryData(url) {
return new Promise(function(resolve, reject) {
var xhr =new XMLHttpRequest()
xhr.onreadystatechange = function() {
if(xhr.readyState != 4) return
if(xhr.status === 200) {
resolve(xhr.responseText)
}else{
reject('ERROR!')
}
}
xhr.open('get', url)
xhr.send('key1=value1&value2=key2')
})
}
// queryData('http://site01.com/vue01/users.php').then(function(data) {
// console.log(data)
// })
// ==============================================
// 发送多次 AJAX 请求并且保证顺序
// 保证链式编程，避免回调地狱
// 使用 Promise 可以返回 Promise对象或者直接返回数据
// 1. 如果返回 Promise 对象，则由该 Promise 对象调用下一个then
// 2. 如果直接返回 普通值，则默认产生一个新的 Promise 对象去调用下一个then
queryData('http://site01.com/vue01/users.php?id=2').then(function(data) {
console.log(data)
return queryData('http://site01.com/vue01/time.php') // 返回 第二次请求 promise对象
}).then(function(data) {
console.log(data)
return queryData('http://site01.com/vue01/users.php?id=20') // 返回 第三次请求 promise对象
}).then(function(data) {
console.log(data)
return '第三次请求' // 返回数据，则下一个then接收该参数
}).then(function(data) {
console.log(data+"-------")
})
</script>
Promise 常用 API
实例方法
- p.then() 得到异步任务的正确结果
- p.catch() 得到异常信息
- p.finally() 成功与否都会执行
静态方法
Promise.all( [ ] )
Promise.race( [ ] )
<script>
function queryData(url) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
if(xhr.readyState != 4) return
if(xhr.readyState == 4 && xhr.status == 200) {
resolve(xhr.responseText)
}else{
reject('服务器错误')
}
}
xhr.open('get', url)
xhr.send('key1=value1&key2=value2')
})
}
var p1 = queryData('http://site01.com/vue01/users.php?id=2')
var p2 = queryData('http://site01.com/vue01/users.php?id=4')
var p3 = queryData('http://site01.com/vue01/users.php?id=6')
Promise.all([p1, p2, p3]).then(function(result) {
console.log(result)
return Promise.race([p1, p2, p3])
})
.then(function(res) {
console.log(res)
})
</script>
<script type="text/plain">
1. 数组中对象 均为 promise 实例（如果不是，则默认使用 Promise.resolve 转为 promise 实例）
2. Promise.all([]) 接收 数组 做参数
3. Promise.race([]) 接收 数组 作参数，当数组实例对象状态改变（fulfilled或rejected）的时候，p实例的状态跟着改变，返回第一个改变状态的promise的返回值，传给 p 的回调函数
4. all() 所有任务都执行才有结果 return array
5. race() 只要有一个完成任务就有结果 return object
</script>
fetch
-
不是 AJAX 的 进一步封装，而是原生 js，没有使用 XMLHttpRequest 对象
-
fetch( url, options ).then( )
响应格式数据
- text( ) 将返回体处理成 字符串 形式
- json( ) 返回结果和 JSON.parse(responseText) 一样
axios
基于Promise用于浏览器和 node.js 的 HTTP 客户端
- 支持 浏览器 和 node.js
- 支持 Promise
- 能拦截请求和响应
- 自动转换 JSON 数据
axios.get( url )
.then(ret=>{
// data属性名称是固定的，用户获取后台响应的数据
console.log(ret.data)
})
axios 常用 API
- get： 查询数据
- post： 添加数据
- put： 修改数据
- delete： 删除数据
GET传递参数
- 通过 URL 传递参数
axios.get('/data?id=123')
.then(ret=>{
console.log(ret.data)
})
axios.get('/data/123')
.then(ret=>{
console.log(ret.data)
})
// restful格式请求
- 通过 params 选项传递参数
axios.get('/data', {
params: {
id: 123
}
})
.then(ret=>{
console.log(ret.data)
})
DELETE传递参数
参数传递方式与 GET 类似
POST传递参数
- 通过选项传递参数（默认 json格式的数据）
axios.post('/data', {
uname: 'tom',
pwd: 123
}).then(ret=>{
console.log(ret.data)
})
- 通过 URLSearchParams 传递参数（application/x-www-form-urlencoded 表单格式数据 - 键值对）
var params = new URLSearchParams()
params.append('uname', 'zhangsan')
params.append('pwd', '111')
axios.post('http://site01.com/vue01/test.php/44', params)
.then(function(ret){
console.log(ret.data)
})
####### PUT 传递参数
axios.put('/data', {
uname: 'tom',
pwd: 123
}).then(ret=>{
console.log(ret.data)
})
axios 响应结果
- data：实际响应回来的数据
- headers：响应头信息
- status：响应码信息
- statusText：响应状态信息
axios 全局配置
- axios.defaults.timeout = 3000; //超时时间
- axios.defaults.baseURL = 'http://localhost:3000/app'; //默认地址
- axios.defaults.headers['mytoken'] = '*****************' //设置请求头
axios拦截器
请求拦截器
在请求发送前进行一些操作 例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易
axios.interceptor.request.use(function(config) {
console.log(config.url)
// 任何请求都会经过这一步 在发送请求之前做些什么
config.header.mytoken = 'hello'
// 这里一定要return 否则配置不成功
return config
}, function(err){
console.log(err)
})
响应拦截器
在接收到响应后进行一些操作 例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页
axios.interceptors.response.use(function(res) {
// 在接收响应做些什么
var data = res.data
return data
}, function(err){
// 对响应错误做点什么
console.log(err)
})
