vue-封装axios请求

最新推荐文章于 2023-03-21 21:39:04 发布

原创

最新推荐文章于 2023-03-21 21:39:04 发布 · 928 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue #post

本文记录了在Vue项目中封装axios的详细步骤，包括配置baseConfig.js、pro.env文件，以及在src/api创建httplib.js进行封装。在组件中调用接口的示例也一同给出，提醒开发者注意模块导出和导入的正确匹配，避免使用module.exports和import混用导致错误。

最近接手新的vue项目，发现axios竟然没有封装，立马动手封装，这里记录一下完整的封装过程，废话不说，直接上代码
baseConfig.js文件

//存放各个服务器的地址
// const express = require('express')
const proEnv = require('./pro.env')  // 生产环境配置文件，这里给出一个示例，其他都相似
const uatEnv = require('./uat.env')  // 测试环境
const devEnv = require('./dev.env')  // 本地环境
// const app = express()
const env = process.env.NODE_ENV;
console.log("env",env)
let target = '';
if (env === 'development') {
    target = devEnv.hosturl
} else if (env === 'production') {
    target = proEnv.hosturl
} else {
    target = uatEnv.hosturl
}
// module.exports =  target
export default target;

pro.env文件

// 生产环境
const hosturl = 'http://xx.xx.xx.xxx:xx'
module.exports = {
  NODE_ENV: 'production',
  hosturl: hosturl
}

在src/api下新建一个httplib.js来放封装内容

import axios from 'axios'
import {
    stringify
} from "qs";
// 引入上述文件
import target from "../config/baseConfig.js";

/*
* 封装axios  2020.4.7 --by lhg
*/
const codeMessage = {
    200: "服务器成功返回请求的数据。",
    201: "新建或修改数据成功。",
    202: "一个请求已经进入后台排队（异步任务）。",
    204: "删除数据成功。",
    400: "发出的请求有错误，服务器没有进行新建或修改数据的操作。",
    401: "用户没有权限（令牌、用户名、密码错误）。",
    403: "用户得到授权，但是访问是被禁止的。",
    404: "发出的请求针对的是不存在的记录，服务器没有进行操作。",
    406: "请求的格式不可得。",
    408: "请求失败了",
    410: "请求的资源被永久删除，且不会再得到的。",
    422: "当创建一个对象时，发生一个验证错误。",
    500: "服务器发生错误，请检查服务器。",
    502: "网关错误。",
    503: "服务不可用，服务器暂时过载或维护。",
    504: "网关超时。"
};
const g