1. 前言准备
axios目前依然是主流的 请求库
ant是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品
2. axios简单配置
2.1 安装
顺带安装 了 antd-mobile 移动端的,现在移动端项目居多嘛 5x版本
npm install --save antd-mobile
"antd-mobile": "^5.7.1",
"axios": "^0.26.1",
2.2 基础配置
目录
src/axios/index.js
- 引入
axios antd-mobilebaseURL配置- 请求拦截 配置
- 响应拦截 配置
Promise
import axios from 'axios'; import { Toast} from 'antd-mobile'; // 全局的 axios 默认值 // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。 // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL axios.defaults.baseURL = '你自己的服务器地址'; // axios.defaults.headers = {} // axios.defaults.timeout = 3000 // 跨域请求的凭证 是否携带 cookie axios.defaults.withCredentials = true //*************** 添加请求拦截器 axios.interceptors.request.use( (config)=> { // 在发送请求之前做些什么 // console.log(config) Toast.show({ icon: 'loading', content: "努力加载中...", duration: 5000, }) return config; }, function (error) { Toast.clear() // 对请求错误做些什么 return Promise.reject(error); }); // ************************添加响应拦截器 axios.interceptors.response.use( (response)=> { console.log("-----响应拦截-----",response) // 对响应数据做点什么 Toast.clear() // ******************** 直接返回数据 return response.data; }, (error)=> { Toast.show({ icon: 'fail', content: "服务器错误", }) // 对响应错误做点什么 return Promise.reject(error); });
3. 挂载到 原型上
import { Component } from "react"; Component.prototype.$axios = axios
因为类组件都是继承于
Component
4. 引入配置的axios和 antd 样式
入口 index.js
import "./axios"
- 5x的 ant不需要单独在全局引入样式了
- 直接引入
组件即可，antd-mobile 会自动为你加载 css 样式文件：
5. 扩展
通常网站上传和下载会有单独的接口
App.js里面配置
import { Component, PureComponent } from 'react'; Component.prototype.uploadBaseUrl = "上传地址"; PureComponent.prototype.downloadBaseUrl = "下载地址"; // PureComponent.prototype.shopImgBaseUrl = "图片地址";
6. 界面使用
类组件的使用
this.$axios.get(`/v1/?type=${type}`)
函数式组件使用
import axios from 'axios' axios.get(`/v1/?type=${type}`)
6.1 引入
import axios from "axios"
6.2 使用
可以直接在 componentDidMount钩子里面发送请求
判断n个请求都完成了
axios.all()
function getUserAccount() { return axios.get('/user/12345'); } function getUserPermissions() { return axios.get('/user/12345/permissions'); } axios.all([getUserAccount, getUserPermissions]).then(res => { //res 得到的是数组 //是有顺序的 console.log(res); })
7. 重置样式
7.1 目录配置
样式目录 src/assets/css/reset.css
图片目录 src/assets/img
工具函数目录 src/assets/js
7.2 全局引入
入口类引入 ---方式---1
import "./assets/css/reset.css" import "./assets/js/resize" import './index.scss';
样式文件 单独在 入口的
index.css文件引入
@import "./assets/css/reset.css";
8. async await 用法
async componentDidMount(){ try{ let res1 = await axios.get("/v1/use?type=1") console.log("res1---:",res1) } catch(error){ console.log("-------",error) }
