vue封装接口 - 技术栈

封装接口前缀

配置逻辑

接口存放文件

配置代理

获取数据方法

封装接口前缀

config.js

复制代码

const serverConfig = {
    baseURL: "https://xxx.xxxxxxxx.com/api", // 请求基础地址,可根据环境自定义
    useTokenAuthorization: false, // 是否开启 token 认证
  };
  export default serverConfig;

配置逻辑

api.js

复制代码

import axios from "axios";
import serverConfig from "./config";
import qs from "qs";


// 创建 axios 请求实例
const serviceAxios = axios.create({
  baseURL: serverConfig.baseURL, // 基础请求地址
  timeout: 10000, // 请求超时设置
  withCredentials: false, // 跨域请求是否需要携带 cookie
});


// 创建请求拦截
serviceAxios.interceptors.request.use(
  (config) => {
    // 如果开启 token 认证
    if (serverConfig.useTokenAuthorization) {
      config.headers["Authorization"] = localStorage.getItem("token"); // 请求头携带 token
    }
    // 设置请求头
    if(!config.headers["content-type"]) { // 如果没有设置请求头
      if(config.method === 'post') {
        config.headers["content-type"] = "application/x-www-form-urlencoded"; // post 请求
        config.data = qs.stringify(config.data); // 序列化,比如表单数据
      } else {
        config.headers["content-type"] = "application/json"; // 默认类型
      }
    }
    console.log("请求配置", config);
    return config;
  },
  (error) => {
    Promise.reject(error);
  }
);


// 创建响应拦截
serviceAxios.interceptors.response.use(
  (res) => {
    let data = res.data;
    // 处理自己的业务逻辑，比如判断 token 是否过期等等
    // 代码块
    return data;
  },
  (error) => {
    let message = "";
    if (error && error.response) {
      switch (error.response.status) {
        case 302:
          message = "接口重定向了！";
          break;
        case 400:
          message = "参数不正确！";
          break;
        case 401:
          message = "您未登录，或者登录已经超时，请先登录！";
          break;
        case 403:
          message = "您没有权限操作！";
          break;
        case 404:
          message = `请求地址出错: ${error.response.config.url}`;
          break;
        case 408:
          message = "请求超时！"; 
          break;
        case 409:
          message = "系统已存在相同数据！";
          break;
        case 500:
          message = "服务器内部错误！";
          break;
        case 501:
          message = "服务未实现！";
          break;
        case 502:
          message = "网关错误！";
          break;
        case 503:
          message = "服务不可用！";
          break;
        case 504:
          message = "服务暂时无法访问，请稍后再试！";
          break;
        case 505:
          message = "HTTP 版本不受支持！";
          break;
        default:
          message = "异常问题，请联系管理员！";
          break;
      }
    }
    return Promise.reject(message);
  }
);
export default serviceAxios;

接口存放文件

user.js

复制代码

import serviceAxios from "../request/api";


export const index = (params) => {
  return serviceAxios({
    url: "/index",//url放接口
    method: "post",
    params,
  });
};

配置代理

vue.config.js

复制代码

module.exports = {
  //vue-cli3.0 里面的 vue.config.js做配置
devServer: {
    proxy: {
        '/api': {
            target: 'https://xxx.xxxxxxxx.com',  // 后台接口域名
            secure: false,  // 如果是https接口，需要配置这个参数
            changeOrigin: true,  //是否跨域
        }
    }
  }
  
  };

获取数据方法

复制代码

 import { index as user } from "../request/user";
 async function qwe() {
   let params = {
     email: "123",
     password: "12321"
   }
   let data = await user(params);
   console.log(data);
 }

本篇文章结束，大致就是这样，感谢观看。