關于axios配置多個請求地址(打包后可通過配置文件修改)

更新時間：2022年09月08日 14:50:33 作者：莫爾道嘎老范

這篇文章主要介紹了關于axios配置多個請求地址(打包后可通過配置文件修改)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

axios配置多個請求地址(打包后可通過配置文件修改)

開發(fā)過程中可能會遇到后端接口分布在多個地址下的情況,

這樣調(diào)用不同接口時,就需要切換不同的請求地址;

我是這樣處理的

核心代碼

// 2.請求攔截器
service.interceptors.request.use(
    (config) => {
        console.log('config', config);
        //發(fā)請求前做的一些處理，數(shù)據(jù)轉(zhuǎn)化，配置請求頭，設置token,設置loading等，根據(jù)需求去添加
        config.data = JSON.stringify(config.data); //數(shù)據(jù)轉(zhuǎn)化,也可以使用qs轉(zhuǎn)換
        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} //如果要求攜帶在參數(shù)中
        //   config.headers.token= token; //如果要求攜帶在請求頭中
        // }
        return config;
    },
    (error) => {
        Promise.reject(error);
    },
);

在axios實例service中,通過判斷傳入?yún)?shù)的字段來更改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. 創(chuàng)建新的axios實例，
const service = axios.create({
    // 超時時間 單位是ms，這里設置了3s的超時時間
    timeout: 3 * 1000,
});
// 2.請求攔截器
service.interceptors.request.use(
    (config) => {
        console.log('config', config);
        //發(fā)請求前做的一些處理，數(shù)據(jù)轉(zhuǎn)化，配置請求頭，設置token,設置loading等，根據(jù)需求去添加
        config.data = JSON.stringify(config.data); //數(shù)據(jù)轉(zhuǎn)化,也可以使用qs轉(zhuǎn)換
        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} //如果要求攜帶在參數(shù)中
        //   config.headers.token= token; //如果要求攜帶在請求頭中
        // }
        return config;
    },
    (error) => {
        Promise.reject(error);
    },
);
// 3.響應攔截器
service.interceptors.response.use(
    (response) => {
        //接收到響應數(shù)據(jù)并成功后的一些共有的處理，關閉loading等
        return response;
    },
    (error) => {
        /***** 接收到異常響應的處理開始 *****/
        if (error && error.response) {
            // 1.公共錯誤處理
            // 2.根據(jù)響應碼具體處理
            switch (error.response.status) {
                case 400:
                    error.message = error.response.data.msg;
                    break;
                case 401:
                    error.message = '未授權(quán)，請重新登錄';
                    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 = '網(wǎng)絡未實現(xiàn)';
                    break;
                case 502:
                    error.message = '網(wǎng)絡錯誤';
                    break;
                case 503:
                    error.message = '服務不可用';
                    break;
                case 504:
                    error.message = '網(wǎng)絡超時';
                    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);
        /***** 處理結(jié)束 *****/
        //如果不需要錯誤處理，以上的處理過程都可省略
        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: 請?zhí)顚懞喗?
 */
/****   http.js   ****/
// 導入封裝好的axios實例
import request from './request';
const http = {
    /**
     * methods: 請求
     * @param url 請求地址
     * @param params 請求參數(shù)
     */
    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: 請?zhí)顚懞喗?
 */
import http from '../utils/http';
let model = '/api/model/';
// get請求
//根據(jù)ID獲得單個模型信息
export function getModelParams() {
    return http.get(`/api/getModelList`, {}, 'api2'); //使用第二個地址
}
// post請求
// 獲取模型集列表
export function getModelViewListAPI(params) {
    return http.post(`/api/modelView/search`, params, 'api1');
}

這樣在封裝接口函數(shù)時即可控制其請求地址,并且由于地址是由靜態(tài)文件引入的,所以打包后的資源中依然有原文件,可通過該文件更改地址

在這里插入圖片描述

axios請求方法

axios中各種方法調(diào)用接口

Axios是一個基于promise的HTTP庫，可以用在瀏覽器和node.js中

可以提供以下服務：

1、從瀏覽器中創(chuàng)建XMLHttpRequests

2、從node.js創(chuàng)建http請求

3、支持PromiseAPI

4、攔截請求和響應

5、轉(zhuǎn)換請求數(shù)據(jù)和響應數(shù)據(jù)

6、取消請求

7、自動轉(zhuǎn)換JSON數(shù)據(jù)

8、客戶端支持防御XSRF

get：獲取數(shù)據(jù)
post：提交數(shù)據(jù)（表單提交+文件上傳）
put：更新數(shù)據(jù)（所有數(shù)據(jù)推送到后端）
patch：更新數(shù)據(jù)（只將修改的數(shù)據(jù)推送到后端）
delete：刪除數(shù)據(jù)

get方法

1.不帶參數(shù)

axios.get(“/user”)

2.帶參數(shù)

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方法

主要提交表單數(shù)據(jù)和上傳文件

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

注意這里以鍵值對的方式提交params就是鍵名,此處的params也可以省略，直接填寫后面要傳入的參數(shù)

delete方法

1.參數(shù)為普通的字符

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

2.參數(shù)為數(shù)組形式這里比較容易入坑

axios.delete("/user",{
?? ?data:arr
})//其中arr=[1,2,3]的數(shù)組形式存在，鍵值必須是data

put方法

和post方法一樣

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

總結(jié)：以上方法中，get方式和delete方法帶參數(shù)時比較特殊；但最為特殊的時delete方法帶的參數(shù)為數(shù)組形式時。

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: { // 這里的參數(shù)設置為URL參數(shù)（根據(jù)URL攜帶參數(shù)）
? ? ? 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攔截器來在發(fā)送請求之前或在響應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);

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Nuxt 項目性能優(yōu)化調(diào)研分析
這篇文章主要介紹了Nuxt 項目性能優(yōu)化調(diào)研分析，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
Vue中路由守衛(wèi)的具體使用
導航守衛(wèi)就是路由跳轉(zhuǎn)前、中、后過程中的一些鉤子函數(shù)，本文詳細的介紹了Vue中路由守衛(wèi)的具體使用，具有一定的參考價值，感興趣的可以了解一下
2021-12-12
vue2之vue.config.js最全配置教程
本文主要介紹了vue2之vue.config.js最全配置教程,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-06-06
vue element項目引入icon圖標的方法
這篇文章主要介紹了vue element項目引入icon圖標的方法,本文圖文并茂給大家介紹的非常詳細，需要的朋友可以參考下
2018-06-06
vue如何使用外部特殊字體的操作
這篇文章主要介紹了vue如何使用外部特殊字體的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
el-form-item中表單項label和表單項內(nèi)容換行實現(xiàn)方法
這篇文章主要給大家介紹了el-form-item中表單項label和表單項內(nèi)容換行實現(xiàn)的相關資料,每個表單el-form由多個表單域el-form-item組成,需要的朋友可以參考下
2023-09-09
詳解Vue如何在頁面刷新時進行重定向
這篇文章主要為大家詳細介紹了Vue如何在頁面刷新時進行重定向,文中的示例代碼簡潔易懂,具有一定的借鑒價值,有需要的小伙伴可以參考一下
2025-01-01
詳談vue中router-link和傳統(tǒng)a鏈接的區(qū)別
這篇文章主要介紹了詳談vue中router-link和傳統(tǒng)a鏈接的區(qū)別，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
使用WebStorm開發(fā)Vue3項目詳細教程
這篇文章主要介紹了使用WebStorm開發(fā)Vue3項目的相關資料,本文介紹了在WebStorm中使用Vue3、TypeScript、Sass開發(fā)項目的配置過程,包括版本兼容性問題、項目搭建、依賴包安裝、代碼檢查工具配置、運行和調(diào)試等步驟,需要的朋友可以參考下
2024-11-11
Vue watch響應數(shù)據(jù)實現(xiàn)方法解析
這篇文章主要介紹了Vue watch響應數(shù)據(jù)實現(xiàn)方法解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-07-07