Promise
简介
Promise是ES6(ES2015)中的一个非常好用的工具类。
The Promise object is used for asynchronous computations. A Promise represents a single asynchronous operation that hasn’t completed yet, but is expected in the future.
译文:Promise对象用于异步操作,它表示一个尚未完成且预计在未来完成的异步操作。
作用
- 用于进行异步处理(网络请求)
- 可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果
- 可以在对象之间传递和操作promise,帮助我们处理队列
Promist的三种状态
状态 | 名称 | 说明 |
---|---|---|
pending | 等待状态 | 例如正在进行网络请求,或者正在等待定时器触发 |
fulfill | 满足状态 | 当我们主动回调resolve时,就处于该状态,并且回调.then() |
reject | 拒绝状态 | 主动回调reject时,就处于该状态,并且回调.catch() |
封装Promise
基本使用模拟
const pms = new Promise((resolve,reject)=>{
//模拟异步操作
setTimeout(()=>{
//执行回调
resolve('setTimeout data')
},2000)
}).
--------------------------------------------
pms.then(res=>{
//处理resolve
console.log(res);
}).catch(err=>{
//处理错误
console.log(err);
});
一般来说都会把Promise对象return出去,然后掉用着接受并处理resolve回调结果。
并行处理
使用Promise的all函数,all(promiseArr[]).then(( resultArr[] )=>{})
new Promise((resolve,reject)=>{
console.log('primise 回调');
setTimeout(()=>{
console.log('setTimeout success');
resolve('setTimeout data')
},2000)
}).then(res=>{
console.log(res);
}).catch(err=>{
});
Promise.all([
new Promise((resolve,reject)=>{
//模拟异步操作
setTimeout(()=>{
//回调处理结果
resolve("setTimeout 1")
},1000)
}),
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve("setTimeout 2")
},1000)
}),
]).then((resultArr)=>{
//处理结果
console.log(resultArr[0]);
console.log(resultArr[1]);
})
axios
常用网络请求方式
axios(config)
axios.request(config)
axios.get(url,config)
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.patch(url[, data[, config]])
配置项
配置项 | 关键字 | 示例 |
---|---|---|
请求地址 | url | url: ‘/homeData’ |
请求类型 | method | method: ‘get’, get可替换为其他请求类型 |
请求根路径 | baseURL | baseURL:‘http://www.xxx.com/api’ |
超时设置 | timeout | timeout:2000, 2秒钟 |
请求前数据处理 | transformRequest | transformRequest:[function(data){ }] |
请求后的数据处理 | transformResponse | transformResponse: [function(data){ }] |
自定义请求头 | headers | headers:{‘x-Requested-With’:‘XMLHttpRequest’} |
URL查询对象 | params | params: {id:1001} |
查询对象序列化函数 | paramsSerializer | paramsSerializer: function(params){ }} |
request body | data | data:{key:‘ddddd’} |
跨域是否带Token | withCredentials | withCredentials:false |
自定义请求处理 | adapter | adapter:function(resolve, reject, config){ } |
身份验证信息 | auth | auth:{uname:‘xxx’, pwd:‘123’} |
响应数据格式 | responseType | responseType: ‘json’, 格式: json/blob/document/arraybuffer/text/stream |
结合Promise进行网络请求封装
// 一般方案
export function myAxios(config){
return new Promise((resolve,reject)=>{
const axiosInstance = axios.create({
baseURL:'http://www.xxx.com:8080/api',
timeout:5000
});
//发送真正的网络请求
axiosInstance(config).then(res=>{
//回调resolve
resolve(res);
}).catch(err=>{
//回调异常
reject(err)
})
})
//优化方案
export function myAxios(config){
return new Promise((resolve,reject)=>{
const axiosInstance = axios.create({
baseURL:'http://www.xxx.com:8080/api',
timeout:5000
});
//发送网络请求, 因为axios会返回Promise对象,所以不用再在内部返回
return axiosInstance(config)
})
//使用示例
myAxios({
url:'/homeData'
}).then(res=>{
//处理请求结果
console.log(res)
}).catch(err=>{
//处理异常
console.log(err)
});
拦截器
axios提供了拦截器, 用于我们正在每次发送的request或着得到的response进行处理。
//配置请求和响应拦截
axiosInstance.interceptors.request.use(config=>{
//config 为request内容
//todo
return config;//处理后转发
},err=>{
//此处可以对拦截器中的err进行处理
return err;
});
axiosInstance.interceptors.response.use(response=>{
//config 为response内容
//todo
return response;//处理后转发
},err=>{
//此处可以对拦截器中的err进行处理
return err;
});
Q&A请指正!