vue中对axios进行封装

vue中对axios进行封装

• 先在vue中安装axios
• 在src文件中添加一个http文件，在其中创建一个request.js（中写封装的axios）文件
• 将axios导入进去
• axios中提供的常用的内容：

公共url（服务器地址）
超时时间
请求头
请求方法：get pust delete put
请求拦截 加载效果，特殊的请求头
响应拦截 取消加载效果 对错误码进行拦截

封装axios的内容

import axios from "axios"  // 引入axios
import router from "../router"   // 引入router

let baseUrl = "";
//利用node环境变量判断,用来区分开发\测试\生产(发布)环境
if (process.env.NODE_ENV === "development") {//开发
    baseUrl = "https://www.liulongbin.top:8888/api/private/v1/"
} else if (process.env.NODE_ENV === "production") {//发布
    baseUrl = "发布地址"
}

// axios 配置默认公共属性
const http = axios.create({
    baseURL: baseUrl,//默认前置url
    timeout: 5000, //默认请求超时事件
})
//请求拦截器
http.interceptors.request.use((config) => {
    //登录成功之后 后续请求都需要在请求头中携带token值才可以继续操作
    // 为请求头对象，添加 Token 验证的 Authorization 字段
    config.headers.Authorization = window.sessionStorage.getItem("token")
    return config
})
//响应拦截器
http.interceptors.response.use((config) => {
    //判断http状态
    switch (config.status) {
        case 200://成功状态
            let responseData = config.data;
            //成功后的状态码异常处理
            switch (responseData.meta.status) {
                case 404://后端返回code  404
                    router.push("/404")
                    console.log("跳转到404");
                    break;
                case 500://后端返回code  500
                    console.log("跳转到500");
                    break;
                case "token过期":
                    router.push("/login")
            }
            break;
        case 404://http404状态
            console.log("跳转到404");
            break;
        case 500://http500处理
            console.log("跳转到500");
            break;
    }
    return config
})

export default http			// 将内容暴露出去

添加一个loginApl.js文件夹

import http from "./request";

export default {
    login(data){
        return http.post("login", data)
    }
}

哪里需要使用就在哪里使用

法2：
创建一个 .env.development 页面，其中内容为：（开发地址）

BASE_URL = "/"  // 当前使用的开发地址
NODE_ENV = "development"  // 名称

创建一个 .env.prodection 页面，其中内容为：（发布地址）

BASE_URL = "/"  // 当前使用的发布地址
NODE_ENV = "prodection"  // 名称

创建一个 .env.test 页面，其中内容为：（测试地址）

BASE_URL = "/"  // 当前使用的测试地址
NODE_ENV = "test"  // 名称

package.json中