axios封装+根据环境请求不同的url

封装axios的时候，会创建一个axios实例，然后配置他的baseUrl,今天搞了好久才搞定，特来记录下

首先安装axios

npm install axios

然后新建文件夹utils,建个js文件，用来封装axios

 

 

 文件内容，只是简单封装了下，自己搭项目玩的，token什么的都没有，baseUrl，后面会讲

import axios from 'axios'

const request = axios.create({
    //根据运行环境来选择相应接口地址
    baseURL: import.meta.env.VITE_API_URL,
    timeout: 6000, //设置超时
})

/*------------- 拦截器---------*/
    // 请求拦截器
request.interceptors.request.use(function (config) {
    return config
}, function (err) {
    return Promise.reject(err)
})

    // 响应拦截器
request.interceptors.response.use((response) => {
    return response
},(error) => {
    //响应错误
    let message = ''
    if(error.response&&error.response.status){
        const status = error.response.status
        switch (status) {
            case 400:
                message = '请求错误';
                break;
            case 401:
                message = '请求错误';
                break;
            case 404:
                message = '请求地址出错';
                break;
            case 408:
                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 = '请求失败'
        }
        return Promise.reject(error);
    }
})

export default request

然后去写接口就行了。新建个api文件夹，在里面写接口

import request from "../utils/request";

export function getVal() {
    return request({
        url: '/api/get',
        method: 'get'
    })
}

ok,这样就封装好了，去请求下看一下

 

 

 数据成功返回，说明请求成功

 

下面讲一下根据运行环境配置url

我的项目是vite+vue3的，具体配置是这样

根目录下新建三个文件：

.env --- 全局默认配置文件，在所有的环境中被载入
.env.development --- 开发环境的配置
.env.production --- 生产环境的配置，当 build 运行会触发此文件

 全局环境 .env 文件  可以配置全局属性

# open 运行 npm run dev 时自动打开浏览器
VITE_OPEN = false

开发环境 .env.dev 文件

# 开发环境
VITE_ENV = 'development'

# 开发环境接口地址
VITE_API_URL = 'https://localhost:8081'

生产环境 .env.pro 文件

# 线上环境
VITE_ENV = 'production'

# 生产环境
VITE_NODE_FLAG = 'pro'

# 线上环境接口地址
VITE_API_URL = 'https://production/vue-next-admin-preview/'

package.json 中配置模式, 要去掉注释

"scripts": {
    "dev": "vite --mode dev", // 运行时读取 .env 和 .env.dev文件中的配置
    "pro": "vite --mode pro", // 运行时读取 .env 和 .env.pro 文件中的配置
    "build:dev": "vue-tsc --noEmit && vite build --mode dev", // npm run build:dev 打包时读取 .env 和 .env.dev文件中的配置
    "build:pro": "vue-tsc --noEmit && vite build --mode pro", // npm run build:pro 打包时读取 .env 和 .env.pro 文件中的配置
    "preview": "vite preview"
  },

 

 使用import.meta.env来获取文件中的配置

在使用axios请求接口时配置基本路径

import axios from "axios"
export const http = axios.create({
    baseURL: import.meta.env.VITE_API_URL,
    timeout: 10000,
})

这样你执行npm run dev 和npm run pro。它的baseURL就会不一样了，变成你设定的url。达到了运行不同命令，实现不同url的目的