2025年mobx结合axios调用爱奇艺接口的简单实用

科技前沿 • 2025-02-26 21:51 • 阅读 35

大家好，我是讯享网，很高兴认识大家。

什么是mobx

MobX 是一个经过战火洗礼的库，它通过透明的函数响应式编程(transparently applying functional
reactive programming - TFRP)使得状态管理变得简单和可扩展。MobX背后的哲学很简单:
任何源自应用状态的东西都应该自动地获得。其中包括UI、数据序列化、服务器通讯，等等。

# 准备阶段

使用react的脚手架初始化

npx create-react-app myapp --template typescript

讯享网

然后安装mobx mobx-reacrt axios这三个库

讯享网yarn add mobx mobx-react axios

然后创建utils api store types文件夹

utils 用于封装axios
api 调用接口
store 创建mobx的store
types 创建一个类型接口

开整

封装axios

在utils里面创建request.ts

讯享网

import axios from "axios"; const instance = axios.create({ 
    timeout: 5000, withCredentials: true, }); instance.interceptors.request.use( function (config) { 
    return config; }, function (error) { 
    return Promise.reject(error); } ); instance.interceptors.response.use( function (response) { 
    return response.data; }, function (error) { 
    return Promise.reject(error); } ); // get请求 export const get = (url: string, params: any) => instance.get<any>(url, { 
    params }); // post请求 export const post = (url: string, data: any) => instance.post<any>(url, data); // put请求 export const put = (url: string, data: any) => instance.put<any>(url, data); // del请求 export const del = (url: string, data: any) => instance.delete<any>(url, data);

调用接口

在api里面创建aiqiy.ts文件

讯享网import { 
    get } from "../utils/request"; export const aiqiy = (data: any) => get( "https://pcw-api.iqiyi.com/search/recommend/list?channel_id=2&data_type=1&mode=4&page_id=2&ret_num=48&session=af8d9881e221ed35bf2c121b2", data );

创建ts类型

在types文件夹下面创建aiqiy.d.ts文件

export type AiqiyType = { 
    albumId: number; sourceId: number; name: string; imageUrl: string; channelId: number; description: string; videoCount: number; latestOrder: number; period: string; people: { 
    main_charactor: [ { 
    id: number; name: string; }, { 
    id: number; name: string; }, { 
    id: number; name: string; } ]; }; categories: string[]; exclusive: number; qiyiProduced: numbe; focus: string; isAdvance: false; payMark: 0; payMarkUrl: string; score: 8.1; imageSize: string[]; title: string; pingback: { 
    doc_id: number; }; playUrl: string; };

创建store

讯享网import { 
    makeAutoObservable, runInAction } from "mobx"; import { 
    aiqiy } from "../api/aiqiy"; import { 
    AiqiyType } from "../types/aiqiy"; class movieList { 
    constructor() { 
    makeAutoObservable(this, { 
   }); } movieData = [] as AiqiyType[]; async getList() { 
    const res = await aiqiy({ 
   }); runInAction(() => { 
    this.movieData = res.data; }); } } export default new movieList();

index.ts 这里自定义一个hooks ”useStore“用于获取组件获取store的值，在index.ts中也初始化一下store

import { 
    createContext, useContext } from "react"; import aiqiy from "./aiqiy"; class MainStore { 
    aiqiy = aiqiy; } const store = new MainStore(); const Context = createContext(store); export function useStore() { 
    return useContext(Context); } export default Context;

最后在组件中使用

讯享网import { 
    observer } from "mobx-react"; import { 
    useEffect } from "react"; import { 
    useStore } from "../../store"; function index() { 
    const { 
    aiqiy } = useStore(); useEffect(() => { 
    aiqiy.getList(); }, [aiqiy]); return <>{ 
   JSON.stringify(aiqiy.movieData)}</>; } export default observer(index);

效果

总结

没有总结