react----脚手架搭建项目 + 进度条插件 使用（nprogress）

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第17天，点击查看活动详情

==脚手架搭建项目==

npx create-react-app movie-app # 使用react脚手架搭建项目
npm start # 启动项目,先进入文件夹
组件中react中function和class两种快速创建的快捷键，
		function是页面中输入： rfce 回车
		class是页面中输入：  rcc 回车
		组件的后缀名既可以是js也可以是jsx
因为用到了axios，所以先安装在引入
		npm i axios
		import axios from 'axios'		

App.js

import React from "react";
import List from "./components/List";
import "./App.css";

function App() {
  return (
    <div className="App">
      <List />
    </div>
  );
}

export default App;

List.jsx

import React, { useState, useEffect } from "react";
import { Button, Card } from "antd";
import { loadDMList } from "../api/iqiyi";

const { Meta } = Card;

function List() {
  const [books, setBooks] = useState([]); // 数据
  const [page, setPage] = useState(1); // 页码
  const [isLoading, toggleLoading] = useState(false); // 加载状态
  // 初始化的时候执行
  useEffect(() => {
    // setBooks([1, 2, 3, 4, 5, 6]);
    toggleLoading(true);
    loadDMList(page).then((res) => {
      setBooks([...books, ...res.data.data.list]);
      toggleLoading(false);
    });
  }, [page]);
  return (
    <div>
      <h1>我是一个List组件</h1>
      {books.map((book) => (
        <Card
          key={book.albumId}
          hoverable
          style={{ width: 240 }}
          cover={<img alt="example" src={book.imageUrl} />}
        >
          <Meta title={book.name} description="www.instagram.com" />
        </Card>
      ))}
      <Button
        onClick={() => {
          setPage(page + 1);
        }}
        type="primary"
        loading={isLoading}
      >
        下一页
      </Button>
    </div>
  );
}

export default List;

上面截图有aiqiyi.js文件 下面也有request.js文件

进度条插件

此处用一个比较常见并且相对简单的进度条插件

1.在github里搜索nprogress 如图 先安装nprogress： npm i nprogress ==单个使用的步骤== 2.引入它的css样式，如果是在react脚手架中： 在index.js文件中写入：import 'nprogress/nprogress.css' 3.再在对应使用nprogress的组件中引入： import NProgress from 'nprogress' 5.在需要开始的位置写：NProgress.start() 在需要结束的位置写：NProgress.done()

==在调取数据接口的情况下统一使用== 在全局拦截中加入进度条 2.找到 node_modules/axios/README.md文件中的498-516行内容，复制到自己创建的utils/request.js文件里 并在它们的请求前的（即instance.interceptors.request.use）成功的函数里写入：NProgress.start() 在相应前的（即instance.interceptors.response.use）的成功和错误函数中写入：NProgress.done() 3.在utils/request.js文件里写入： import 'nprogress/nprogress.css' import NProgress from 'nprogress'

utils/request.js

import axios from "axios";
import "nprogress/nprogress.css";
import NProgress from "nprogress";

const instance = axios.create({
  timeout: 5000,
});

// Add a request interceptor
instance.interceptors.request.use(
  function (config) {
    // Do something before request is sent
    NProgress.start();
    return config;
  },
  function (error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

// Add a response interceptor
instance.interceptors.response.use(
  function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    NProgress.done();
    return response;
  },
  function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    NProgress.done();
    return Promise.reject(error);
  }
);

//
export function get(url, params) {
  return instance.get(url, { params });
}

export function post(url, data) {
  return instance.post(url, data);
}

export function del(url, data) {
  return instance.delete(url, data);
}