vue封装接口-编程知识

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);}

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