axios的封装和使用

 

  import config from '../api/config'

  import axios from 'axios'

　import {getLocal} from '../utils/local'

class HttpRequest {
     //初始化构造函数，this指向的是HttpRequest
    constructor(){
        this.baseURL = config.baseURL;
        this.timout = 3000;
    }
    setInterceptors(instance){ //创建拦截器
        instance.interceptors.request.use(config=>{
            // 一般增加一些token属性等  jwt
            config.headers.token = 'token'

　　　　　　　// 设置了config需要返回

　　　　　　　return config

        });
        //响应拦截器
        instance.interceptors.response.use(res=>{
            if (res.status == 200) {
                return Promise.resolve(res.data);
            }else {
                return Promise.reject(res.data)
            }
        },err=>{
            switch (err.response.status) {
                case '401':
                    console.log(err)
                    break;
            
                default:
                    break;
            }
            return Promise.reject(err)
        })
    }
    mergeOptions(options){
        return {
            baseURL:this.baseURL,timout:this.timout,...options
        }
    }
    //真正发送请求在这
    request(options){
        const instance = axios.create();
        this.setInterceptors(instance);
        const opts = this.mergeOptions(options);
        return instance(opts);
    }
    //封装get方法
    get(url,config){
        return this.request({
            method:'get',
            url,
            params:config,
          
        })
    }
    //封装post方法
    post(url,data){
        return this.request({
            method:'post',
            url,
            data:data,
          
        })
    }
}

export default new HttpRequest;  

调用:

把url和请求分开放进js文件里

 

引入封装好的axios和url文件

 

 

 最后在页面中调用