axios封装 vue

野性酷女 2022-12-20 05:37 167阅读 0赞

引入axios封装

import axios from "axios";
    
    // axios封装请求方法
    // axios配置
    const config = { 
      baseURL: "",
      headers: { 
        "Content-type": "application/json",
      },
      timeout: 30000,
    };
    const instance = axios.create(config);
    
    // 请求前做拦截，用于判断
    const requestInterceptor = instance.interceptors.request.use(
      (config) => { 
        // 拦截修改config
        // 返回到请求中配置
        // if (!config.headers.token) { 
        // // headers没有token令牌执行
        // config.headers.token = "no";
        // }
        return config;
      },
      (error) => { 
        // 立即执行失败的reject方法
        return Promise.reject(error);
      }
    );
    // 响应后做拦截，用于修改响应数据
    const responseInterceptor = instance.interceptors.response.use(
      (response) => { 
        // 对响应数据做点什么
        // console.log('对响应数据做点什么',response)
        return response;
      },
      (error) => { 
        // 立即执行响应的reject方法
        return Promise.reject(error);
      }
    );
    // 移除拦截器
    // interceptors.request.eject(requestInterceptor);
    // interceptors.request.eject(responseInterceptor);

封装post和get方法：1

// 和 promise + generator 一起使用的get封装
    const get = (url, data, handle, errorHandle) => { 
      instance
        .get(url, {  params: data })
        .then((res) => { 
          let result = res.data;
          console.log("请求:", res);
          return result
          if (handle || typeof handle == "function") handle(result);
        })
        .catch((error) => { 
          if (errorHandle || typeof errorHandle == "function") errorHandle(error);
        });
    };
    const post = (url, data, handle, errorHandle) => { 
      instance
        .post(url, data)
        .then((res) => { 
          let result = res.data;
          if (handle || typeof handle == "function") handle(result);
        })
        .catch((error) => { 
          if (errorHandle || typeof errorHandle == "function") errorHandle(error);
        });
    };
    
    export default {  get, post}

封装post和get方法：2（链式结构）

const get= (url, data = { }) => { 
      return instance.get(url, { 
        params: data
      });
    }
    
    const post = (url, data = { }) => { 
      return instance.post(url, data);
    }
    export default {  get, post}