关于axios配置多个请求地址(打包后可通过配置文件修改)

2024-11-01 09:42:03

axios配置多个请求地址(打包后可通过配置文件修改)

开发过程中可能会遇到后端接口分布在多个地址下的情况,

这样调用不同接口时,就需要切换不同的请求地址;

我是这样处理的

核心代码

// 2.请求拦截器
service.interceptors.request.use(
    (config) => {
        console.log('config', config);
        //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
        config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
        config.headers = {
            'Content-Type': 'application/x-www-form-urlencoded', //配置请求头
            // 'Content-Type':'multipart/form-data; boundary=ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC'
        };
        switch (config.urlType) {
            case 'api1':
                config.url = baseURL + config.url;
                break;
            case 'api2':
                config.url = baseURL2 + config.url;
                break;
            default:
                config.url = baseURL + config.url;
        }
        //注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie
        // const token = getCookie('名称');//这里取token之前，你肯定需要先拿到token,存一下
        // if(token){
        //   config.params = {'token':token} //如果要求携带在参数中
        //   config.headers.token= token; //如果要求携带在请求头中
        // }
        return config;
    },
    (error) => {
        Promise.reject(error);
    },
);

在axios实例service中,通过判断传入参数的字段来更改url地址

以get请求为例

完整代码

axios实例:

/****   request.js   ****/
// 导入axios
import axios from 'axios';
// 使用element-ui Message做消息提醒
import { ElMessage } from 'element-plus';
let baseURL = configUrl.Base_Resource_URL; //index.html引入的
let baseURL2 = configUrl.Base_Resource_URL2;
//1. 创建新的axios实例，
const service = axios.create({
    // 超时时间 单位是ms，这里设置了3s的超时时间
    timeout: 3 * 1000,
});
// 2.请求拦截器
service.interceptors.request.use(
    (config) => {
        console.log('config', config);
        //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
        config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
        config.headers = {
            'Content-Type': 'application/x-www-form-urlencoded', //配置请求头
            // 'Content-Type':'multipart/form-data; boundary=ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC'
        };
        switch (config.urlType) {
            case 'api1':
                config.url = baseURL + config.url;
                break;
            case 'api2':
                config.url = baseURL2 + config.url;
                break;
            default:
                config.url = baseURL + config.url;
        }
        //注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie
        // const token = getCookie('名称');//这里取token之前，你肯定需要先拿到token,存一下
        // if(token){
        //   config.params = {'token':token} //如果要求携带在参数中
        //   config.headers.token= token; //如果要求携带在请求头中
        // }
        return config;
    },
    (error) => {
        Promise.reject(error);
    },
);
// 3.响应拦截器
service.interceptors.response.use(
    (response) => {
        //接收到响应数据并成功后的一些共有的处理，关闭loading等
        return response;
    },
    (error) => {
        /***** 接收到异常响应的处理开始 *****/
        if (error && error.response) {
            // 1.公共错误处理
            // 2.根据响应码具体处理
            switch (error.response.status) {
                case 400:
                    error.message = error.response.data.msg;
                    break;
                case 401:
                    error.message = '未授权，请重新登录';
                    break;
                case 403:
                    error.message = '拒绝访问';
                    break;
                case 404:
                    error.message = '请求错误,未找到该资源';
                    window.location.href = '/';
                    break;
                case 405:
                    error.message = '请求方法未允许';
                    break;
                case 408:
                    error.message = '请求超时';
                    break;
                case 500:
                    error.message = '服务器端出错';
                    break;
                case 501:
                    error.message = '网络未实现';
                    break;
                case 502:
                    error.message = '网络错误';
                    break;
                case 503:
                    error.message = '服务不可用';
                    break;
                case 504:
                    error.message = '网络超时';
                    break;
                case 505:
                    error.message = 'http版本不支持该请求';
                    break;
                default:
                    error.message = `连接错误${error.response.status}`;
            }
        } else {
            // 超时处理
            if (JSON.stringify(error).includes('timeout')) {
                ElMessage.error('服务器响应超时，请刷新当前页');
            }
            error.message = '连接服务器失败';
        }
        ElMessage.error(error.message);
        /***** 处理结束 *****/
        //如果不需要错误处理，以上的处理过程都可省略
        return Promise.resolve(error.response);
    },
);
//4.导入文件
export default service;

分别封装请求方式:

/*
 * @Author: 老范
 * @Date: 2022-01-12 15:56:04
 * @LastEditors: 老范
 * @LastEditTime: 2022-01-19 11:52:42
 * @Description: 请填写简介
 */
/****   http.js   ****/
// 导入封装好的axios实例
import request from './request';
const http = {
    /**
     * methods: 请求
     * @param url 请求地址
     * @param params 请求参数
     */
    get(url, params, type) {
        const config = {
            method: 'get',
            url: url,
            urlType: type,
        };
        if (params) {
            config.params = params;
        }
        return request(config);
    },
    post(url, params, type) {
        const config = {
            method: 'post',
            url: url,
            urlType: type,
        };
        if (params) config.data = params;
        return request(config);
    },
    put(url, params, type) {
        const config = {
            method: 'put',
            url: url,
            urlType: type,
        };
        if (params) config.data = params;
        return request(config);
    },
    delete(url, params, type) {
        const config = {
            method: 'delete',
            url: url,
            urlType: type,
        };
        if (params) config.params = params;
        return request(config);
    },
};
//导出
export default http;

具体接口例子:

/*
 * @Author: 老范
 * @Date: 2022-01-12 16:17:22
 * @LastEditors: 老范
 * @LastEditTime: 2022-01-19 11:53:39
 * @Description: 请填写简介
 */
import http from '../utils/http';
let model = '/api/model/';
// get请求
//根据ID获得单个模型信息
export function getModelParams() {
    return http.get(`/api/getModelList`, {}, 'api2'); //使用第二个地址
}
// post请求
// 获取模型集列表
export function getModelViewListAPI(params) {
    return http.post(`/api/modelView/search`, params, 'api1');
}

这样在封装接口函数时即可控制其请求地址,并且由于地址是由静态文件引入的,所以打包后的资源中依然有原文件,可通过该文件更改地址

axios请求方法

axios中各种方法调用接口

Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中

可以提供以下服务：

1、从浏览器中创建XMLHttpRequests

2、从node.js创建http请求

3、支持PromiseAPI

4、拦截请求和响应

5、转换请求数据和响应数据

6、取消请求

7、自动转换JSON数据

8、客户端支持防御XSRF

get：获取数据
post：提交数据（表单提交+文件上传）
put：更新数据（所有数据推送到后端）
patch：更新数据（只将修改的数据推送到后端）
delete：删除数据

get方法

1.不带参数

axios.get(“/user”)

2.带参数

axios.get("/user",{
    params:{
        id:10,
        age:10
    }
}//请求的地址实际为 localhost:8080/user?id=10&age=10

注意这里是以对象的形式传参

简单的提一句所有的方法也可以这样写不过一般习惯于简写

axios({ methods: 'get', url: '/user' })//也就是直接axios({methods:请求方式，url:'路径'，params：{有就带没有就不带}})

post方法

主要提交表单数据和上传文件

axios.post("/user",
    params:{
        id:id
    }
)

注意这里以键值对的方式提交params就是键名,此处的params也可以省略，直接填写后面要传入的参数

delete方法

1.参数为普通的字符

axios.delete("/user",{
    params:{
        id:id
    }
})

2.参数为数组形式这里比较容易入坑

axios.delete("/user",{
    data:arr
})//其中arr=[1,2,3]的数组形式存在，键值必须是data

put方法

和post方法一样

axios.put("/user", data);

总结：以上方法中，get方式和delete方法带参数时比较特殊；但最为特殊的时delete方法带的参数为数组形式时。

axios.all请求多个请求

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
  }));

最下面来个常用格式

axios.get('/getUser?id=12345')
  .then(function (response) {
    console.log(response)
    this.setState({
      // ...
    })
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
axios.get('/getUser', {
    params: { // 这里的参数设置为URL参数（根据URL携带参数）
      id: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  }) 
 
async function getUser() {
  try {
    const response = await axios.get('/getUser?id=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

axios全局配置

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

axios的单一实例化配置

const instance = axios.create({
  baseURL: 'https://api.example.com'
});
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

axios拦截器的使用

可以使用axios拦截器来在发送请求之前或在响应response之前（then方法）来拦截请求并进行自定义的设置，定义request和response拦截器示例如下

axios.interceptors.request.use(function (config) {
    return config;
  }, function (error) {
    return Promise.reject(error);
  });
 
axios.interceptors.response.use(function (response) {
    return response;
  }, function (error) {
    return Promise.reject(error);
  })

删除拦截器的时候

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

如何在Vue项目中使用axios请求

在实际的项目中,和后台的数据交互是少不了的,我通常使用的是 axios 库,所以以下示例也是以 axios 为基础来进行封装的. 1.安装首先是 npm 安装 axios 很简单:npm install axios 2.没有封装存在的问题如果在没有封装接口的项目中,在文件中随处可以看到如下的接口调用方法: this.$axios.post("/user/add", { params: { name: this.name, age: this.age } }) .then(res =
动态Axios的配置步骤详解

前言以前写Vue项目的时候都是使用vue-resource做为项目ajax库,在11月份的某一天尤大微博的更新表示ajax的库应该是通用的,放弃了对vue-resource的技术支持,推荐使用axios. 推荐使用Vue-cli工具来创建和管理项目,就算刚开始不熟悉,用着用着便可知晓其中的奥妙.前一段时间官方所推荐的数据请求插件还是Vue-resource,但现在已经变了,变成了Axios,不用知道为什么变了,反正这个用起来比那个好一些,用就是了,下面是一些封装axios请求的一些经验,不对之
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)

本项目是vue-cli搭建的项目框架,引入axios用于数据请求.配置不同的接口地址,(首先确保已经集成了axios,如对集成axios有疑问的道友,可参看我之间的一篇vue-cli 引入axios)操作如下一.设置不同的接口地址找到如下文件 /config/dev.env.js /config/prod.env.js 之后增加接口地址域名配置,增加后的文件内容如下二.在自己重新封装的axios文件中(api/api.js),将配置好的接口地址作为baseURL拼接到接口路径中详细的ap
关于Vue3使用axios的配置教程详解

目录一.安装axios 二.配置axios,添加拦截器三.使用axios发送请求附:Vue3 中全局引入 axios 总结 axios中文网站:axios-http.com/zh/ 一.安装axios npm install axios --save 二.配置axios,添加拦截器在src目录下新建一个request文件夹,在里面新建index.ts(或者.js)文件,编辑代码如下: import axios from 'axios' // 创建一个 axios 实例 const ser
关于axios配置多个请求地址(打包后可通过配置文件修改)

目录 axios配置多个请求地址(打包后可通过配置文件修改) 核心代码完整代码 axios请求方法 axios中各种方法调用接口 get方法 post方法 delete方法 put方法 axios配置多个请求地址(打包后可通过配置文件修改) 开发过程中可能会遇到后端接口分布在多个地址下的情况, 这样调用不同接口时,就需要切换不同的请求地址; 我是这样处理的核心代码 // 2.请求拦截器 service.interceptors.request.use( (config) => { conso
Postman配置多环境请求地址的实现

作用: 平时用postman测试接口时,同一个接口免不了要在多个环境测试,但是每次都要手动的修改请求的IP地址是在麻烦,可以用此方法提高效率,省事不少 1.创建 - 点击页面右上角齿轮 2.点击弹出页面右下角的Add按钮 3.填写请求地址例如: 点击右下角Add按钮完成环境的创建 4.新建请求 5.点击send发送请求如果能正常请求地址,并获取到返回值,说明该环境配置完成 6.同样的步骤配置多个环境之后请求只需要在此处点击更换请求的环境即可,不用每次都需要手动修改IP地址到此这篇关于Pos
vue打包之后生成一个配置文件修改接口的方法

前言: 我们的vue代码打包上传到服务器之后,要是数据接口以后换了域名什么的,是不是需要重新去vue文件里修改接口. 能不能生成一个配置文件,里面可以配置域名或其它什么字段之类的,这样以后换了域名,只需打开记事本修改一下域名即可. 教程: 第一步:安装generate-asset-webpack-plugin插件 npm install --save-dev generate-asset-webpack-plugin 第二步:配置webpack.prod.conf.js文件 //让打包的时候
Vue项目打包后可修改基础接口地址配置的具体操作

目录一.目的二.具体操作实现总结一.目的最近在学习或工作中遇到,把 Vue 前端项目打包后,要求可以再次修改请求后端接口的基础地址.平常开发中在 Vue 项目中使用 axios 时把请求后端接口的基础地址写在了 baseURL 里. 这样子打包后如果要改图里红框处的地址,要么去打包编译后的文件堆里一个个搜索(如果项目不小的话,这文件堆可不少...),找到后直接改,要么在源码里改完后重新再打包部署,这两种做法都显得有些麻烦,且维护性也不好. 所以本文用一种较好的方案来解决以上问题,通过创
vue修改打包配置如何实现代码打包后的自定义命名

目录修改打包配置实现代码打包后的自定义命名修改配置后打包为首先修改router文件打开项目中的build文件夹修改js打包的命名方法修改css打包的命名方法命名修改如下图片还有一种情况是 vue 修改打包文件名修改打包配置实现代码打包后的自定义命名打包后文件修改配置后打包为首先修改router文件例如,这是原本方法引用页面: //基础配置 import BasicDispose from './pages/BasicDispose/BasicDispose' 现修改为:
nuxt+axios实现打包后动态修改请求地址的方法

需求:把请求地址等一些配置暴露出来以便打包后动态修改,而不需要重新打包编译. 这样也是挺不错的,当一个项目需要部署到几个不同的服务器上时候,就不用说每次都要修改后再重新打包.功能不变时,单单是修改一下请求地址省了不少功夫. 1.开始把需要动态修改的配置写在一个配置json文件里面.该配置文件可以放在static目录下: 静态文件目录:静态文件目录 static 用于存放应用的静态文件,此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理. 服务器启动的时候,该目录下的文件会映
如何修改Vue打包后文件的接口地址配置的方法

1.背景常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可.但是最近在做的项目中,涉及到私有化部署,就是对应的生产环境的地址,不是唯一的.如果每次都修改一个地址,再打包文件进行部署,过程繁琐且低效.那么如何把环境地址设置成可配置的,不需要再构建代码就能直接生效呢? 2.可选方案进行了调研后,网上介绍的方案有2种: 1)在static上设置一个config.js,把配置的参数设置成 window 下的
vue项目打包后请求地址错误/打包后跨域操作

vue项目 npm run dev时跨域请求正常,但是打包后请求地址就错误(请求地址不存在),请求不到数据. 在vue项目中常用的是proxyTable代理跨域,这个用起来比较方便,但是当项目打包后就遇到这个问题了. 解决办法如下: 打开config文件夹下的index.js文件,添加以下代码 pathRewrite: { '^api':'https://*****.com' //填写需要跨域的地址 } 2.配置开发环境地址,就是config文件夹下的dev.env.js文件,添加以下代码: '
简单聊一聊axios配置请求头content-type

目录前言开始使用总结前言现在前端开发中需要通过Ajax发送请求获取后端数据是很普遍的一件事情了,鉴于我平时在撸码中用的是vue技术栈,今天这里来谈谈我们常用的发Ajax请求的一个插件—axios. > 现在网上可能发送Ajax请求有很多种插件,每种用法可能略有差异,大家只需挑选一种自己喜欢的即可.毕竟现在还有很多人使用jQuery,$.ajax用法也是很多了. 开始因为需要用到axios插件,所以我们现在项目种下载依赖 npm install axios -S axios虽然是一个