关于Axios的二次封装

前言

        Axios用的好好的为什么要进行二次封装?二次封装的好处是什么？怎么样进行二次封装？这篇文章告诉朋友们。

一、为什么要进行二次封装

        Axios本身提供了很多的配置选项，其中包括超时时间、请求头、网络异常、Loading效果、请求拦截与响应拦截等功能。其中很多配置项在调用的时候都是需要进行默认配置的，这个时候我们就需要把相同的配置项提取出来，然后进行统一的配置。这样就可以极大的减少我们的工作量。

二、怎样进行二次封装

1. 创建一个存放配置的文件，例如index.js（我开始学习时这样搞的，起什么名随意，最后自己能找到路径就可以），准备好它用来存放请求功能。
2. 在文件中引入axios：

   import axios from 'axios';

3. 创建一个实例，设置默认配置

   const service = axios.create({
     baseURL: 'https://127.0.0.1', // 设置基础 URL
     timeout: 5000, // 设置超时的时间
     headers: { // 请求头
       'Content-Type': 'application/json',
     },
   });

4. 给它添加请求拦截器和响应拦截器

   // 请求拦截器：
   service.interceptors.request.use((config)=>{
     console.log(config.url, config.baseURL, '请求的数据') // config中存在所有的请求信息
     // 将配置好的config对象返回出去 如果不返回 请求不会进行下去
     return config
   }, err => {
     //响应失败的返回
     Promise.reject(err)
   })
   
   // 响应拦截器
   service.interceptors.response.use((res)=>{
     // 成功的回调函数
     console.log(res) // res中存在所有返回的信息
     return res.data;
   }, error =>{
     let {status, res} = error
     console.log(status, res) // 查看返回的错误信息
     if (res) {
       switch (status) {
         case 401:
           break
         case 403:
           break
         case 404:
           break
         case 500:
           break
       }
     } else {
       // 如果数据不存在执行的判断
     }
     // 失败的回调函数
     return Promise.reject(error);
   })
   
   // 暴露service
   export default service
   

5. 开始使用封装的Axios，新建一个文件one.js，然后再文件中引入封装的实例，然后封装一个方法

   import service from  "@/utils/index.js"; // 后面的路径为自己存放实例的路径
   
   export const handleLogin = (params) => {
     return service({
       url: '/code' // 拼接在baseURL后面的路径
       method: "post" ,   // 调用接口的方法
       data: params // 给后端的传值
     })
   }
   

6. 最后就可以在页面当中调用这个方法了

   import {handleLogin} from "@/utils/one.js"; // 调用封装的方法
   
   let params = {} // 给接口的传值
   
   handleLogin(params).then(res => {
       console.log(res)
   }).catch(err => {
       console.log(err)
   }).finally(fly => {
       console.log(fly)
   })
   
   
   

大功告成。

---

        愿世界永无bug