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

ゞ浴缸里的玫瑰 2021-09-21 02:44 617阅读 0赞

### 文章目录 ###

*   *  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的三种状态 ###

<table> 
 <thead> 
  <tr> 
   <th>状态</th> 
   <th>名称</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>pending</td> 
   <td>等待状态</td> 
   <td>例如正在进行网络请求,或者正在等待定时器触发</td> 
  </tr> 
  <tr> 
   <td>fulfill</td> 
   <td>满足状态</td> 
   <td>当我们主动回调resolve时,就处于该状态,并且回调.then()</td> 
  </tr> 
  <tr> 
   <td>reject</td> 
   <td>拒绝状态</td> 
   <td>主动回调reject时,就处于该状态,并且回调.catch()</td> 
  </tr> 
 </tbody> 
</table>

### 封装Promise ###

**基本使用模拟**

一般来说都会把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]])

### 配置项 ###

<table> 
 <thead> 
  <tr> 
   <th>配置项</th> 
   <th>关键字</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>请求地址</td> 
   <td>url</td> 
   <td>url: ‘/homeData’</td> 
  </tr> 
  <tr> 
   <td>请求类型</td> 
   <td>method</td> 
   <td>method: ‘get’, get可替换为其他请求类型</td> 
  </tr> 
  <tr> 
   <td>请求根路径</td> 
   <td>baseURL</td> 
   <td>baseURL:‘http://www.xxx.com/api’</td> 
  </tr> 
  <tr> 
   <td>超时设置</td> 
   <td>timeout</td> 
   <td>timeout:2000, 2秒钟</td> 
  </tr> 
  <tr> 
   <td>请求前数据处理</td> 
   <td>transformRequest</td> 
   <td>transformRequest:[function(data){ }]</td> 
  </tr> 
  <tr> 
   <td>请求后的数据处理</td> 
   <td>transformResponse</td> 
   <td>transformResponse: [function(data){ }]</td> 
  </tr> 
  <tr> 
   <td>自定义请求头</td> 
   <td>headers</td> 
   <td>headers:{‘x-Requested-With’:‘XMLHttpRequest’}</td> 
  </tr> 
  <tr> 
   <td>URL查询对象</td> 
   <td>params</td> 
   <td>params: {id:1001}</td> 
  </tr> 
  <tr> 
   <td>查询对象序列化函数</td> 
   <td>paramsSerializer</td> 
   <td>paramsSerializer: function(params){ }}</td> 
  </tr> 
  <tr> 
   <td>request body</td> 
   <td>data</td> 
   <td>data:{key:‘ddddd’}</td> 
  </tr> 
  <tr> 
   <td>跨域是否带Token</td> 
   <td>withCredentials</td> 
   <td>withCredentials:false</td> 
  </tr> 
  <tr> 
   <td>自定义请求处理</td> 
   <td>adapter</td> 
   <td>adapter:function(resolve, reject, config){ }</td> 
  </tr> 
  <tr> 
   <td>身份验证信息</td> 
   <td>auth</td> 
   <td>auth:{uname:‘xxx’, pwd:‘123’}</td> 
  </tr> 
  <tr> 
   <td>响应数据格式</td> 
   <td>responseType</td> 
   <td>responseType: ‘json’, 格式: json/blob/document/arraybuffer/text/stream</td> 
  </tr> 
 </tbody> 
</table>

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