axios二次封装

axios二次封装

创建index.js，路径src/http/index.js

//对于axios进行二次封装，想用它的请求和响应拦截器
import axios from "axios";
//引入进度条
import nprogress from 'nprogress'
//引入进度条样式，
import "nprogress/nprogress.css"
// 引入错误消息样式
import { ElMessage } from 'element-plus'

// 在当前模块中引入store
import store from '@/store'

//1：利用axios对象的方法create，去创建一个axios实例
//2：requeset就是axios，只不过稍微配置一下
const $http = axios.create({
    //配置对象
    // 基础路径，发请求时候，路径中会出现api
    baseURL: "/api",
    //代表请求超时的时间5s
    timeout: 5000,
});
//请求拦截器：在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
$http.interceptors.request.use(config => {
    //config：配置对象，对象里面有一个属性很重要，headers请求头
    if (store.state.detail.uuid_token) {
        // 请求头添加一个字段(userTempId):和后台老师商量好了
        config.headers.userTempId = store.state.detail.uuid_token
    }
    // 需要携带token给服务器
    if (store.state.user.token) {
        config.headers.userTempId = store.state.user.token
    }
    nprogress.start();
    return config;
});
//响应拦截器
$http.interceptors.response.use(res => {
    //成功的回调函数：服务器响应数据回来以后，响应拦截器可以检测到，可以做一些事情
    nprogress.done();
    if(res.data.code!==200){
        ElMessage.error(res.data.message)
    }
    return res.data.data;
}, error => {
    ElMessage.error(error)
    //响应失败的回调函数
    return Promise.reject(new Error('faile'));
})

//对外暴露
export default $http;

使用（简洁）

import axios from "axios";
import nprogress from 'nprogress'
import "nprogress/nprogress.css"
import { ElMessage } from 'element-plus'

const $http = axios.create({
    baseURL: "/api",
    timeout: 5000,
});

$http.interceptors.request.use(config => {
    nprogress.start();
    return config;
});

$http.interceptors.response.use(res => {
    nprogress.done();
    if(res.data.code!==200){
        ElMessage.error(res.data.message)
    }
    return res.data.data;
}, error => {
    ElMessage.error(error)
    return Promise.reject(new Error('faile'));
})

export default $http;

创建api.js，路径src/http/api.js

import $http from './index'

export const login = (data) => $http.post("/login",data)

代理跨域， vue.config.js

module.exports = {
    //代理跨域
    devServer: {
      proxy:{
        //带有/api的请求就发给后端接口
        '/api':{
          //后端接口
          target:'http://39.98.123.211'
        }
      }
    }
}

vite代理登录问题

.env.development中

# 开发环境代理
VITE_PROXY_DOMAIN = /DMSservice 这个会添加到请求路径中，但是不耽误实际请求路径。

# 开发环境后端地址
VITE_PROXY_DOMAIN_REAL = "http://smarthit.beta.xfusion.com/dsp"
VITE_PROXY_DOMAIN_REAL = "http://10.81.42.131/dsp"
前面域名和IP地址都行。这个后面/dsp，host+VITE_PROXY_DOMAIN是完全替换VITE_PROXY_DOMAIN_REAL的，把VITE_PROXY_DOMAIN_REAL替换过去之后，保证对应的后端路径正确即可，/dsp可以在这里加，也可以加到url那里。

VITE_LOGIN_URL = "http://uniportal.beta.xfusion.com/uniportal1?redirect=http://dev.beta.xfusion.com:8848"
VITE_LOGOUT_URL = "http://uniportal.beta.xfusion.com/uniportal1/logout?redirect=http://dev.beta.xfusion.com:8848"
登录和登出，重定向的地址不能用IP地址，需要用域名，用IP地址会导致登录死循环。域名在hosts文件中的映射，不能用localhost，需要具体的IP。

vite.config.ts中

// host: "dev.beta.xfusion.com",
host: "10.81.42.131",可以用域名或IP地址，不能用localhost