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

什么是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);

效果

总结

没有总结