npm i axios
yarn add axios
在项目 src 目录中创建一个 api 目录,用来存放所有的请求接口。
我们以获取商品分类数据为例。
在 api 目录中创建一个 categories.js 文件,该文件中用来设置所有关于商品分类的请求:
import axios from 'axios'
export const getCategoriesAsync = (params) => axios.get('/categroy/findCategroy', {
params: params
});
export const addCategoriesAsync = data => axios.post('/categroy/addCategroy', data);
在项目 src 目录中创建一个 utils 目录,用来存放工具类的文件,我们将 axios 的封装文件 axios.js 也可以放在里面。
import axios from 'axios';
axios.defaults.baseURL = 'http://web.woniulab.com:8002';
// 响应拦截器
axios.interceptors.response.use(
res => res.data, // 拦截到响应对象,将响应对象的 data 属性返回给调用的地方
err => Promise.reject(err)
)
最后在 index.js 中引入该文件:
import './utils/axios.js';
例如在商品分类列表的组件中,我们要调用封装好的接口:
import { getCategoriesAsync } from '../../../api/categories';
export default class Categories extends Component {
state = {
data: []
}
componentDidMount() {
this.getCategories();
}
getCategories = async () => {
const res = await getCategoriesAsync({ parentId: 0 });
if(res.code) {
this.setState({
data: res.data.data
})
}
}
// ...
}