资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

前端如何配置全局axios

创作时间:

作者:

@小白创作中心

前端如何配置全局axios

引用

来源

https://docs.pingcode.com/baike/2565211

前端配置全局axios的方法包括：创建一个axios实例、配置拦截器、设置默认参数、封装请求方法、在Vue/React等框架中进行全局挂载。其中，创建一个axios实例是关键步骤，它能够帮助我们统一管理所有的axios配置，提高代码的可维护性。

要创建一个axios实例，我们首先需要安装axios库，并在项目的某个文件中创建一个新的axios实例。这个实例可以配置许多默认参数，如基础URL、超时时间、请求头等。通过这种方式，我们可以确保所有的HTTP请求都遵循相同的配置规则，从而简化请求的管理。

一、创建axios实例

在前端项目中，我们通常通过npm或yarn安装axios库。安装完成后，可以在项目的某个文件（例如
api.js
或
http.js
）中创建一个axios实例。


import axios from 'axios';  

const instance = axios.create({  
  baseURL: 'https://api.example.com',  
  timeout: 10000,  
  headers: {'X-Custom-Header': 'foobar'}  
});  
export default instance;

上述代码创建了一个新的axios实例，并设置了基础URL、超时时间和自定义请求头。这个实例可以在项目的其他部分被导入和使用。

二、配置拦截器

拦截器是axios提供的一个强大功能，允许我们在请求或响应被处理之前进行操作。我们可以使用请求拦截器来添加认证令牌，使用响应拦截器来处理错误。

请求拦截器

请求拦截器用于在请求发送前进行一些操作，例如添加认证令牌。


instance.interceptors.request.use(config => {  

  const token = localStorage.getItem('token');  
  if (token) {  
    config.headers.Authorization = `Bearer ${token}`;  
  }  
  return config;  
}, error => {  
  return Promise.reject(error);  
});

响应拦截器

响应拦截器用于在响应到达之前进行一些操作，例如处理错误响应。


instance.interceptors.response.use(response => {  

  return response;  
}, error => {  
  if (error.response.status === 401) {  
    // 处理未授权错误  
    console.error('Unauthorized, redirecting to login...');  
  }  
  return Promise.reject(error);  
});

三、设置默认参数

除了在创建实例时设置默认参数，我们还可以在运行时动态地修改默认参数。例如，我们可以根据不同的环境切换基础URL。


if (process.env.NODE_ENV === 'development') {  

  instance.defaults.baseURL = 'https://dev.api.example.com';  
} else if (process.env.NODE_ENV === 'production') {  
  instance.defaults.baseURL = 'https://api.example.com';  
}

四、封装请求方法

为了进一步简化HTTP请求的管理，我们可以封装一些常用的请求方法。这些方法可以帮助我们统一处理请求和响应的逻辑。


export const get = (url, params) => {  

  return instance.get(url, { params });  
};  
export const post = (url, data) => {  
  return instance.post(url, data);  
};  
export const put = (url, data) => {  
  return instance.put(url, data);  
};  
export const del = (url) => {  
  return instance.delete(url);  
};

五、在Vue/React等框架中进行全局挂载

在Vue项目中，我们可以通过Vue的全局属性挂载axios实例，使其在整个应用中都可以使用。在React项目中，我们可以使用React的Context API来实现类似的效果。

在Vue中挂载

在Vue项目的主文件（例如
main.js
）中，我们可以将axios实例挂载到Vue的原型上。


import Vue from 'vue';  

import App from './App.vue';  
import axios from './api';  
Vue.prototype.$http = axios;  
new Vue({  
  render: h => h(App),  
}).$mount('#app');

在React中挂载

在React项目中，我们可以创建一个Context，并将axios实例作为Context的值提供给整个应用。


import React, { createContext } from 'react';  

import axios from './api';  
export const AxiosContext = createContext();  
const AxiosProvider = ({ children }) => {  
  return (  
    <AxiosContext.Provider value={axios}>  
      {children}  
    </AxiosContext.Provider>  
  );  
};  
export default AxiosProvider;

在应用的入口文件（例如
index.js
）中，我们可以使用这个Context Provider来包裹整个应用。


import React from 'react';  

import ReactDOM from 'react-dom';  
import App from './App';  
import AxiosProvider from './AxiosProvider';  
ReactDOM.render(  
  <AxiosProvider>  
    <App />  
  </AxiosProvider>,  
  document.getElementById('root')  
);

通过以上步骤，我们就可以在React组件中使用Context来访问axios实例。


import React, { useContext } from 'react';  

import { AxiosContext } from './AxiosProvider';  
const MyComponent = () => {  
  const axios = useContext(AxiosContext);  
  const fetchData = async () => {  
    try {  
      const response = await axios.get('/endpoint');  
      console.log(response.data);  
    } catch (error) {  
      console.error(error);  
    }  
  };  
  return (  
    <div>  
      <button onClick={fetchData}>Fetch Data</button>  
    </div>  
  );  
};  
export default MyComponent;