react axios设置统一请求地址 / react axios设置开发 & 生产环境不同接口地址 /react 封装axios

• 思路：

  • axios设置公共请求头：通过axios配置，设置统一的baseURL;

  • 开发环境 & 生产环境接口地址: 通过脚手架提供的环境变量来解决:

---

• 1.在项目根目录创建 .env.development文件，配置REACT_APP_URL = http://localhost:8080
  在开发期间生效，npm start的时候自动读取.env.development文件中的环境变量来设置接口；
  在项目根目录创建 .env.production文件，配置REACT_APP_URL = 线上地址，
  npm run build的时候自动读取.env.development文件中的环境变量来设置接口

• 2.在该文件中添加环境变量REACT_APP_URL（注意: 环境变量约定以REACT_APP_ 开头）

• 3.设置REACT_APP_URL的值默认为 http://localhost:8080，
  并重启脚手架

• 4.创建utils/url.js文件, 在url.js中创建BASE_URL变量，设置其值为process.env.REACT_APP_URL

• 5.在页面中导入url文件，并修改请求路径，图片路径等等；

1,2,3,4

5

axios官方文档：http://www.axios-js.com/docs/

6

到第6步骤，axios请求接口成功，但实际上每个页面的axios.get(都添加了BASE_URL)；
接下来封装一个简易的axios，只需在一个js文件中设置统一请求路径

6 创建api.js，封装axios

7 在页面中导入封装好的axios即可

扩展: 封装react axios拦截器统一添加token

import axios from 'axios'
import { BASE_URL } from './url'

// import {HashRouter} from 'react-router-dom'    //如果使用的是hash路由类型，使用这个
// const router = new HashRouter()

import {BrowserRouter} from 'react-router-dom'    
const router = new BrowserRouter()

const API = axios.create({
    baseURL: BASE_URL
})

// 添加请求拦截器
API.interceptors.request.use(config=>{
    const { url } = config;

    //当url不是/login 或 不是/register请求路由时(这两个路由不需要token)， 请求头添加token    
    if(!url.startsWith('/login') ||  !url.startsWith('/register')){ 
        //当url以/user开头的时候，
        config.headers.Authorization = localStorage.getItem('token');
    }
    return config
})

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

    const { status }  = response.data; //这里的response数据结构不一样，直接打印出来看，参照后端返回的结果

    if(status === 400 || status === 401 || status === 402 || 403){ 
        localStorage.removeItem('token');
        //当token超时or失效 403账号无权限的时候直接跳转到/login页重新登录
        router.history.push('/login')
    }
    return response
})

export { API }