【Vue】学习笔记九：ES6 Promise、axios网络请求封装

---

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对象用于异步操作，它表示一个尚未完成且预计在未来完成的异步操作。

作用

1. 用于进行异步处理（网络请求）
2. 可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
3. 可以在对象之间传递和操作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请指正！