vue axios配置 axios.js

//引入axios
import axios from "axios";

// 创建一个 axios 实例
const http = axios.create({
  baseURL: "http://12xxx", // 所有的请求地址前缀部分
});

// 添加请求拦截器
http.interceptors.request.use(
  function (config) {
    //需要token的情况统一传递Authorization
    let userinfo = window.localStorage.getItem("token");
    /*http默认请求头为json格式，如果需要修改可以在请求参数中传递属性
    如下config会接收到所有信息用来做特殊情况的配置
        this.$axios
         .post(
           `/erignValid`,
           data,
           {
             headerType: "multipart/form-data",
           }
         )
         .then((res) => {
         });
    */
    if (config.headerType !== undefined) {
      //修改config.headers["Content-Type"]
      console.log("config.headerType", config.headerType);
      config.headers["Content-Type"] = config.headerType;
    }
    // 判断token存在再做配置
    if (userinfo) {
      config.headers.Authorization = userinfo;
    }
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    console.log(error);
    return Promise.reject(error);
  }
);

// 添加响应拦截器
http.interceptors.response.use(
  function (response) {
    // console.log(response)
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    // dataAxios 是 axios 返回数据中的 data
    const dataAxios = response.data;
    // 这个状态码是和后端约定的
    const code = dataAxios.reset;
    return dataAxios;
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    console.log(error);
    return Promise.reject(error);
  }
);
/*将定义的实例暴露出去，在其他vue文件中引入使用
 import http from '文件位置/http.js'
 使用
 http.get(
                `/fileName=${fileName}`,
                {
                  responseType: "blob",
                }
              )
              .then((resp) => {})
 */
export default http;
/*
quasar中把$axios绑定在app上即this.$axios写法
export default boot(({ app }) => {
  app.config.globalProperties.$axios = http;
 });
 */
/*

import { boot } from "quasar/wrappers";
import axios from "axios";
import { ElMessage } from "element-plus";
// Be careful when using SSR for cross-request state pollution
// due to creating a Singleton instance here;
// If any client changes this (global) instance, it might be a
// good idea to move this instance creation inside of the
// "export default () => {}" function below (which runs individually
// for each client)
// const http = axios.create({ baseURL: 'http://192.168.1.205:12008' })

// export default boot(({ app }) => {
//   // for use inside Vue files (Options API) through this.$axios and this.$api

//   app.config.globalProperties.$axios = axios
//   // ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
//   //       so you won't necessarily have to import axios in each vue file

//   app.config.globalProperties.$http = http
//   // ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
//   //       so you can easily perform requests against your app's API
// })

//自建140 205
function messageInfo(res) {
  if (res.msg === "success") {
    ElMessage({
      type: res.msg,
      message: res.msg,
    });
  } else {
    ElMessage({
      type: "error",
      message: res.data,
    });
  }
}
function initBaseUrl() {
  let hostUrl = window.location.host;
  if (/(localhost)/.test(hostUrl)) {
    return "http://192.168.1.205:12008";
  } else {
    hostUrl = hostUrl.replace(":12012", ":12008");
    return "http://" + hostUrl;
  }
}
// "http://192.168.1.205:12008"
const http = axios.create({
  baseURL: initBaseUrl(), // 所有的请求地址前缀部分
  //   headers: {
  //     'Content-Type': 'multipart/form-data' // 设置请求头中的 Content-Type
  // }
});

http.interceptors.request.use(
  function (config) {
    let userinfo = window.sessionStorage.getItem("token");
console.log(config,)
    if (config.headerType !== undefined) {
      config.headers["Content-Type"] = config.headerType;
    }
    // 判断token存在再做配置
    if (userinfo) {
      config.headers.Authorization = userinfo;
    }
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    console.log(error);
    return Promise.reject(error);
  }
);

// 添加响应拦截器
http.interceptors.response.use(
  function (response) {
    if (
      response.config.isMessage !== undefined &&
      response.config.isMessage === true
    ) {
      messageInfo(response.data);
    }

    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    // dataAxios 是 axios 返回数据中的 data
    const dataAxios = response.data;
    const code = dataAxios.reset;
    return dataAxios;
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    console.log(error);
    return Promise.reject(error);
  }
);
export default boot(({ app }) => {
  app.config.globalProperties.$axios = http;
});