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'
        });
        //響應攔截器
        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文件

 

 

 最后在頁面中調用