[JavaScript知识库]reactjs+redux/react-redux+redux-thunk+mongoose的架构系列之axios封装及使用方法(七)

在开始这一篇文章之前，本想一次性接着上一篇把redux的中间件redux-saga也总结成成文，但是想想redux-thunk了解了后也能解决项目中的异步请求操作的问题了！决定还是放在本系列文章的最后补充点去记录。

现在我们开始封装react中的axios封装及使用

安装

yarn add axios

src目录下新建utils文件夹

request.js

import axios from "axios";
import { Toast } from "antd-mobile";

const config = {
  baseURL: "http://localhost:3000", // 默认域名,不是接口的域名，是网站的域名
  timeout: 5000, // 响应时间
};
const instance = axios.create(config);

// 配置请求头
instance.defaults.headers["Content-Type"] = "application/json";

//请求拦截器
instance.interceptors.request.use(
  (config) => {
    Toast.loading("拼命加载中..."); //显示加载动画
    config.headers.Authorization = "";
    return config;
  },
  (error) => {
    Toast.hide(); //关闭加载动画
    return Promise.reject(error);
  }
);

//响应拦截器
instance.interceptors.response.use(
  (response) => {
    Toast.hide(); //关闭加载动画
    if (response.data.res_code === "401") {
      // 登录失效
      localStorage.clear(); // 清除缓存
      Toast.fail("您的登录已经失效，请重新登录", 2);
    }
    return response;
  },
  (error) => {
    Toast.hide(); //关闭加载动画
    return Promise.resolve(error.response);
  }
);

// 处理请求返回的数据
function checkStatus(response) {
  return new Promise((resolve, reject) => {
    if (
      response &&
      (response.status === 200 ||
        response.status === 304 ||
        response.status === 400)
    ) {
      resolve(response.data);
    } else {
      Toast.fail("网络异常，请检查网络连接是否正常！", 2);
    }
  });
}

export default {
  post(url, params = {}) {
    return instance({
      method: "post",
      url,
      data: params,
    }).then((response) => {
      return checkStatus(response);
    });
  },
  get(url, params = {}) {
    return instance({
      method: "get",
      url,
      params,
    }).then((response) => {
      return checkStatus(response);
    });
  },
};

引入到入口文件index.js

...
import instance from "./utils/request";
...

此时如果开启了eslint验证的话，会报错

不要慌，先百度一番，发现很多方法都不适用，只得自己思考解决方法！既然是验证，咱们关闭验证即可

package.json

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules":{
      "import/no-anonymous-default-export":0
    }
  }

重启文件，就正常了！

正常的思路，是哪个哪个组件需要发送接口请求，就在哪个文件import instance from ‘…’，这样是可以，但是我嫌太麻烦，要想出一个偷懒的方法，那我们在index.js添加如下代码

global.instance = instance;

作为全局变量来使用。
然后再我们的system.redux.js中创建一个方法

export const USER_DATA = "user_data";

...
case USER_DATA:
      return { ...state, ...action.data };
...

export function getUserData() {
  return (dispatch) => {
  //发送异步请求
    global.instance.get("/data").then((res) => {
      console.log(res, "请求数据...");
      if (res.code === 0) {
        dispatch(userData(res.doc));
      }
    });
  };
}
export function userData(data) {
  return {
    type: USER_DATA,
    data,
  };
}

最终

运行项目，查看redux.devtool

这样我们请求的数据就存放到redux中了。这种全局变量的房有什么问题，大家可以留言交流下~~