封装axios、封装接口地址

我会带着你远行 2021-07-24 20:02 653阅读 0赞

1、封装接口地址
    分为线上地址和线下地址,以及其他信息

export default{ 
        title:'local',
        baseUrl:{ 
            dev:"http://localhost:3000", //开发时的后台地址
            pro:"" //上线后的接口地址
        }
    }

2、封装axios
      (1)引入封装的接口文件
      
      (2)通过全局环境判断是开发环境还是生产环境,确定使用的接口地址
     	
     	 const baseUrl=process.env.NODE_ENV==='development' ? config.baseUrl.dev:config.baseUrl.pro;
     	 
      (3)创建请求类,构造函数中传入接口地址
      
      (4)创建方法,该方法返回固定配置对象信息,包含baseURL
      	之后的axios实例会根据baseURL的路径和url的路径拼接去请求数据
    	  	baseURL、method、url、headers是实例的固定字段
    	  	
      (5)创建方法,传入axios实例,进行拦截器拦截请求
    	
      (6)创建请求方法,传入请求配置对象,里面包含url和method属性
      		该方法中:
      			1、axios.create()创建axios实例
      			2、调用Object.assign(对象1,对象2);合并固定配置对象信息和请求配置对象
      			3、传入axios实例,调用拦截器拦截方法
      			4、返回实例,传入合并的的配置对象,返回的数据中,将包含除了data数据外,还有这些配置信息
      
      (7)导出该请求类对象
      
      (8)封装请求数据方法
      	1、导入请求类
      	2、调用请求方法,传入请求配置对象信息,对象包含url、method属性
      	3、返回实例对象
      	4、导出该方法
      
      (9)数据请求
      	1、导入请求数据方法
      	2、异步接收
      	
    总结:判断环境使用接口,调用拦截器拦截请求,返回axios实例,并传入各种配置信息

代码示例:  
**封装请求类:**

import axios from 'axios';
    import config from '@/config';
    
    //通过全局环境来判断是否是开发环境,从而确定接口地址
    const baseUrl=process.env.NODE_ENV==='development' ? config.baseUrl.dev:config.baseUrl.pro;
    
    class HttpRequest{ 
    
        constructor(baseUrl){ 
            this.baseUrl=baseUrl;
            this.queue={ };
        }
        getInsideConfig() //固定配置
        { 
            const config={ 
                baseURL:this.baseUrl,
                headers:{ }
            };
            return config;
        }
    
        interceptors(instance,url) //请求拦截
        { 
            instance.interceptors.request.use((config)=>{ 
                //配置修改,然后返回
                console.log("拦截请求");
                console.log(config);
                return config;
    
            });
    
            instance.interceptors.response.use((res)=>{ 
    
                console.log('处理响应');
                console.log(res);
                return res;
            },(error)=>{ 
                //请求错误处理
                console.log(error);
                
                return { error:"网络错误"};
            })
        }
    
        request(options) //请求
        { 
            const instance=axios.create();  //创造实例对象
    
            options=Object.assign(this.getInsideConfig(),options); //此方法能将两个对象结合,相同属性后面对象会覆盖前面对象
        
            this.interceptors(instance,options.url); //拦截请求
    
            return instance(options);
        }
    }
    
    const axiosObj=new HttpRequest(baseUrl);
    
    export default axiosObj;

**封装请求方法:**

import axios from '@/api/axios';
    export const getBannerData=()=>{ 
        return axios.request({ 
            url:"banner",
            method:"get"
        })
    }

**请求数据:**