目录
封装接口前缀
配置逻辑
接口存放文件
配置代理
获取数据方法
封装接口前缀
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);}
本篇文章结束,大致就是这样,感谢观看。