promise
2019-03-25 本文已影响0人
樊小勇
什么是promise
- 异步编程的解决方案,是一个构造函数 new promise();
promise 有什么用
- promise对象用于存数据和数据状态
- 回调地狱,代码难以维护
回调地狱:(常常第一个的函数的输出是第二个函数需要的东西)
async 函数(){ await 数据 } 注意获取到的数据前面要加await 不然会报错 - 这个promise可以解决异步的问题(把异步变同步),本身不能说promise是异步的
- 支持多个并发的请求,获取并发请求中的数据
axios 获取后台数据的一个插件
- axios.get aixos.post 得到的也是一个promise对象
- 详细了解请查看 axios 篇
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// 是一个构造函数 new promise();
// 异步编程的解决方案
// 存取(除了数据之外还可以存过程)
var url = 'http://132.232.87.95:3000/api/film/getList';
/**
* 参数是一个函数
* 函数的参数有两个
* resolve 返回成功的信息
* reject 返回失败的信息
* pending 进行中
new Promise((resolve,reject)=>{
()=>{
resolve();
}.()=>{
reject();
}
})
*/
// 将一个请求封装到了promise对象里面(存)
var aa = new Promise((resolve,reject)=>{
axios.get(url).then(res=>{
// 成功
resolve(res.data);
// 去掉data
}).catch(error=>{
reject('请求失败')
})
})
// 读取promise对象里的数据(取)
aa.then(res=>{
console.log(res);
}).catch(error=>{
console.log(error);
})
// 作用:可以封装请求,错误也可以处理
</script>
- 实际应用
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// 需求:拿到第一个电影的详情
var url = 'http://132.232.87.95:3000/api/film/getList';
// promise是一个对象用来处理异步操作
// 方法1.从成功的请求里获取Id再根据Id去获取详情...
// 2.先通过电影列表获取Id再用Id获取电影的详情
// 回调地狱
// axios.get(url).then(res=>{
// let filmId = res.data.films[0].filmId;
// let url = 'http://132.232.87.95:3000/api/film/getDetail';
// axios.get(url,{
// params:{
// filmId
// }
// }).then(res=>{
// console.log(res);
// })
// })
// var getList = new Promise((resolve,reject)=>{
// axios.get(url).then(res=>{
// // 成功
// resolve(res.data);
// }).catch(error=>{
// reject('网络异常')
// })
// })
// async 异步
async function getDetail(){
// 把异步变同步
let url1='http://132.232.87.95:3000/api/film/getList';
let res = await axios.get(url1);
let filmId = res.data.films[0].filmId;
let url = 'http://132.232.87.95:3000/api/film/getDetail?filmId='+filmId;
let res2 = await axios.get(url,{});
console.log(res2);
}
/*
async ()=>{
let a = await 2;
console.log(a);
async和await都要
}
*/
getDetail();
</script>
封装函数方法
/* eslint-disable no-unused-vars */
import axios from 'axios';
// const get = () => {
// console.log('get请求');
// }
// const post = () => {
// console.log('post请求')
// }
// export{
// get,
// post
// }
// process.env.NODE_ENV环境
let baseURL;
if(process.env.NODE_ENV=='development'){
baseURL = 'http://132.232.94.151:3000/api'
}else{
baseURL = '/xxx'
}
// baseURL es6 方法
const $http = axios.create({
baseURL,
})
// create 是axios自带的方法
export const get = (url,params)=>{
params = params || {};
return new Promise((resolve,reject)=>{
// axiso 自带 get 和 post 方法
$http.get(url,{
params,
}).then(res=>{
if(res.data.status===0){
resolve(res.data);
}else{
alert(res.data.msg)
}
}).catch(error=>{
alert('网络异常');
})
})
}
export const post = (url,params)=>{
params = params || {};
return new Promise((resolve,reject)=>{
$http.post(url,params).then(res=>{
if(res.data.status===0){
resolve(res.data);
}else{
alert(res.data.msg);
}
}).catch(error=>{
alert('网络异常');
})
})
}