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

文章目录

• Promise
• 简介
• 做用
• Promist的三种状态
• 封装Promise
• axios
• 经常使用网络请求方式
• 配置项
• 结合Promise进行网络请求封装
• 拦截器

---

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请指正！