什么是mobx

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

这是官网对mobx的描述。也交代了mobx是个什么东西。简单来说他就是一个状态管理工具。
mobx中文网

# 准备阶段

使用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=af8d9881e221ed35b2787026f2c121b2",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

在store文件夹下面创建aiqiy.ts 和index.ts两个文件
aiqiy.ts

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);

效果

总结

没有总结

mobx结合axios调用爱奇艺接口的简单实用相关推荐

效能篇 | 爱奇艺APP一键体检技术实践
背景 AndroidAPP自动化测试目前包括很多测试专项,每一个专项都有很多创新内容,包括功能自动化测试.稳定性自动化测试以及性能自动化测试等,在日常的测试过程中以上的测试技术或者服务均会发现一些问题 ...
跟9位爱奇艺年轻的技术、产品、设计同学聊了聊，他们这样定义“青年”
从整个历史长河来看,相比各种存在已久的传统职业,互联网这个行业还正值其青年期,朝气蓬勃.充满希望.和这个行业一起成长起来的一批青年人,对这个时代和职业的感知也因此更加深刻. 他们与这个世界的共振是什么 ...
爱奇艺背后的AI雷达密码
大数据产业创新服务媒体 --聚焦数据 · 改变商业打开爱奇艺APP,各种清爽的剧集.电影.综艺等扑面而来.当我们随意点开一部,跳过广告,你就会发现爱奇艺AI雷达的踪迹.你可能只知道它可以用来人脸识别 ...
爱奇艺、优酷、腾讯视频竞品分析报告2016（一）
1 背景 1.1 行业背景 1.1.1 移动端网民规模过半,使用时长份额超PC端 2016年1月22日,中国互联网络信息中心 (CNNIC)发布第37次<中国互联网络发展状况统计报告>,报 ...
开发效率提升50%以上，爱奇艺官网主站的Nuxt实践
01 背景让每一个用户获取到稳定.及时的页面体验,是前端工程师们一直以来努力的方向. 作为一个拥有丰富内容资源的视频网站,爱奇艺官网主站需要频繁进行节目上线或者下线.各种活动配置等操作调整,对于页面 ...
走出回归测试困境，爱奇艺精准测试体系建设
01 为什么要做精准测试? 精准测试是为了解决回归测试的质量和效率问题. 在具体的业务中,产品功能的迭代.缺陷修复等等是极为常见的需求场景,但这些看似微小且常见的改动都有可能会对产品庞大的历史功能产生 ...
如何支持亿级用户分流实验？AB实验平台在爱奇艺的实践
01 背景随着互联网公司的产品和业务越来越多样,利用数据来驱动业务决策成为必然,而AB实验正是以数据指标来判断产品功能和运营策略迭代效果的方法和工具,其可以在保证样本同时性和同质性基础上,对比两个或 ...
爱奇艺基于SpringCloud的韧性能力建设
国际站后端业务不断扩展,支撑的服务实例规模也越来越大.并且在此过程中,支持了双云及多地部署. 这也给服务治理带来了挑战,如何应对同城多机房路由.多地容灾等场景,并解决微服务优雅上下线等问题,是国际站业 ...
爱奇艺大数据分析平台的演进之路
首先讲一下爱奇艺大数据平台业务背景,目前日均DAU接近三亿,爱奇艺在业务初期主要关注于长视频,随后发展业务有PPC.UPC,同时还发展了游戏.直播.小说等业务.目前业务线达到20多条,存量的设备信息达 ...

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