vue项目封装请求函数

util下的serve.js

import axios from 'axios'//引入

import { Message } from "element-ui";
const baseURL = "http://www.baidu.com/";
const service = axios.create({
  // 配置项
  baseURL: baseURL,
  withCredentials: true,
  timeout: 50000,
});

// 拦截器
service.interceptors.request.use(
  (config) => {
    // config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
    config.headers = {
      'Content-Type':'application/x-www-form-urlencoded' //配置请求头
    }
    const token = localStorage.getItem("TOKEN");
    if (token) {
      config.headers["Access-Token"] = token.access_token.value;
    }
    return config;
  },
  (err) => Promise.reject(err)
);

service.interceptors.response.use(
  (response) => {
    if (response.status === 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  (error) => {
    if (error.response.status) {
      switch (error.response.status) {
        case 400:
          error.message = "错误请求";
          break;
        case 401:
          error.message = "未授权，请重新登录";
          break;
        case 403:
          error.message = "拒绝访问";
          break;
        case 404:
          error.message = "请求错误,未找到该资源";
          window.location.href = "/NotFound";
          break;
        case 405:
          error.message = "请求方法未允许";
          break;
        case 408:
          error.message = "请求超时";
          break;
        case 500:
          error.message = "服务器端出错";
          break;
        case 501:
          error.message = "网络未实现";
          break;
        case 502:
          error.message = "网络错误";
          break;
        case 503:
          error.message = "服务不可用";
          break;
        case 504:
          error.message = "网络超时";
          break;
        case 505:
          error.message = "http版本不支持该请求";
          break;
        default:
          error.message = `连接错误${error.response.status}`;
      }
    } else {
      // 超时处理
      if (JSON.stringify(error).includes("timeout")) {
        Message.error("服务器响应超时，请刷新当前页");
      }
      error.message("连接服务器失败");
    }

    Message.error(error.message);
    /***** 处理结束 *****/
    //如果不需要错误处理，以上的处理过程都可省略
    return Promise.resolve(error.response);
  }
);

export default service;

util下的http.js

引入上面写的代码 这里是四种格式

import request from "./request";

const http = {
  get(url, params) {
    const config = {
      method: "get",
      url: url,
    };
    if (params) config.params = params;
    return request(config);
  },
  post(url, params) {
    const config = {
      method: "post",
      url: url,
    };
    if (params) config.data = params;
    return request(config);
  },
  put(url, params) {
    const config = {
      method: "put",
      url: url,
    };
    if (params) config.params = params;
    return request(config);
  },
  delete(url, params) {
    const config = {
      method: "delete",
      url: url,
    };
    if (params) config.params = params;
    return request(config);
  },
};

export default http

最后引入上面的http.js

//封装api路由地址
import http from "./http";
// 登陆
 function login(data) {
    return http.get("/person_pay/getpersoninfo",data);
}
 function register(data) {
    return http.post('/register/admin',data)
}
  // 密码登录
function pwd_login(data) {
    return http.put('/pwd_login',data)
}
export {
  login,
  register,
  pwd_login
}

//可以在min.js中注册一下 
import api from './utils/api'
Vue.prototype.$api= api

其他页面使用
this.$api.login({
user:xxxx,
pwd:xxxx
}).then()