axios优化&环境变量
目标
- 能够通过 axios.create() 方法来构建axios实例对象,并且配置baseURL
- 能够知道 .env.development 和 .env.production 两个文件的作用
- 能够配置开发环境变量
- 能够在代码中引入配置的环境变量的值
每一次我们请求接口的时候,每一次都需要写相同的baseUrl。例如:http://localhost:8080,这样太繁琐,所以我们可以对网络请求进行优化,接口域名、图片域名、分为开发环境和生产环境,直接写在代码中,项目发布时,很难替换
配置统一的URL(★★)
axios.defaults.baseURL = 'http://localhost:8080'
// 或者
const instance = axios.create({
baseURL: 'http://localhost:8080'
})
配置生产环境和开发环境(★★★)
// 通过脚手架的环境变量来解决 开发环境
在开发环境变量文件 .env.development 中,配置 REACT_APP_URL= http://localhost:8080
// 通过脚手架的环境变量解决, 生成环境
在生产环境变量文件 .env.production 中,配置 REACT_APP_URL=线上接口地址
使用环境变量(★★★)
在react官网中,有详细说明环境变量的配置
在里面会发现对应的文件还有个 .local 后缀的文件,这个文件的优先级更高,以下就是你输入不同命令,执行文件的优先级
- 在项目根目录中创建文件 .env.development
- 在该文件中添加环境变量 REACT_APP_URL(注意:环境变量约定REACT_APP 开头),设置 REACT_APP_URL=http://localhost:8080
REACT_APP_URL =http://localhost:8080
- 重新启动脚手架,脚手架在运行的时候就会解析这个文件
- 在utils/url.js 中,创建 BASE_URL 变量,设置值为 process.env.REACT_APP_URL
- 导出BASE_URL
// 配置baseURL
export const BASE_URL = process.env.REACT_APP_URL
- 在我们页面引入就能使用了
import {BASE_URL} from '../../utils/url.js'
axios 优化(★★★)
- 在utils/api.js 中,导入 axios和BASE_URL
- 调用 axios.create() 方法创建一个axios实例
- 给 create 方法,添加配置baseURL,值为 BASE_URL
- 导出API对象
import axios from 'axios'
import { BASE_URL } from './url.js'
// 创建axios的配置文件,里面配置baseURL路径
const config = {
baseURL: BASE_URL
}
// 根据create 方法来构建axios对象
const instance = axios.create(config)
export { instance }
- 导入API,代替之前直接利用axois请求的代码
import {instance} from '../../utils/api.js'
列表找房功能
目标
- 说出抽取搜索导航栏的好处
- 能够说出抽取搜索导航栏的思路,并且参照老师代码能够实现抽取功能
- 能够说出条件筛选功能的大致思路,Filter组件作用,FilterTitle组件作用,FilterPicker组件作用,FilterFooter组件作用
- 能够参照老师代码实现FilterTitle组件中的逻辑代码
- 能够参照老师代码实现FilterPicker组件的逻辑代码
功能分析
- 搜索导航栏组件的封装
- 条件筛选栏组件封装
- 条件筛选栏吸顶功能
- 房屋列表
顶部搜索导航栏
封装搜索导航栏组件(★★★)
- 在components 目录中创建组件 SearchHeader/index.js
- 把之前写过的结构拷贝到这个文件中
- 然后把跟首页相关的数据去掉,标题,城市名称
- 通过props来进行传递
import { Flex } from 'antd-mobile';
import React from 'react'
import {withRouter} from 'react-router-dom'
import './index.scss'
import PropTypes from 'prop-types'
function