React学习系列(四)：React 封装axios

新建文件src/api/index.ts

/**
 * 网络请求配置
 */
import axios from "axios"
axios.defaults.timeout = 100000
axios.defaults.baseURL = "http://rap2api.taobao.org/app/mock/314934/"

/**
 * http request 拦截器
 */
axios.interceptors.request.use(
    (config)=>{
        config.data = JSON.stringify(config.data);
        config.headers.set("Content-Type",  `application/json`) // 不显示
        config.headers.set("Authorization",     `Bearer 111111`)
        console.log('config: ', config);
        return config
    },
    (error)=>{
        return Promise.reject(error)
    }
)

/**
 * http response 拦截器
 */

axios.interceptors.response.use(
    (res) => {
        return res
    },
    (err) =>{
        return Promise.reject(err)
    }
)

/**
 * 封装get方法
 * @param url 请求url
 * @param params 请求参数
 * @returns {Promise}
 */

export function get(url:any, params={}){
    return new Promise((resolve,reject)=>{
        axios.get(url, {
            params: params
        }).then((response)=>{
            console.log('params: ', params);
            console.log('url, response: ', url,response.data );
            landing(url, params, response.data);
            resolve(response.data);
        }).catch((err)=>{
            msag(err)
            reject(err);  
        })
    }) 
}

/**
 * 封装post请求
 * @param url
 * @param data
 * @return {Promise}
 */

export function post(url:any, data:any) {
    console.log('url,data: ', url,data);
    return new Promise((resolve, reject)=>{
        axios.post(url,data).then(
            (response)=>{
                resolve(response.data)
            },
            (err)=>{
                msag(err)
                reject(err)
            }
        )
    })
}

// 统一接口处理 返回数据
export default function (fecth:any,url:any,param:any) {
    return new Promise((resolve, reject)=>{
        switch (fecth) {
            case "get" :
                console.log("begin a get request,and url:", url);
                get(url, param).then(function (response){
                    resolve(response)
                }) .catch(function (error) {
                    console.log("get request GET failed.", error);
                    reject(error)
                })
                break;
            case "post":
                console.log("begin a post request,and url:", url);
                post(url,param)
                .then(function (response) {
                    resolve(response)
                })
                .catch(function (error) {
                    console.log("get request POST failed.", error);
                    reject(error);
                  });
                break;
              default:
                break;
        }
    }
    )}


// 失败提示
function msag(err:any) {
    if (err && err.response) {
        switch(err.response.status) {
            case 400:
                alert(err.response.data.error.details)
                break;
            case 401:
                alert("未授权请登录")
                break
            case 403:
                alert("拒绝访问")
                break
            case 404:
                alert("请求地址出错")
                break
            case 408:
                alert("请求超时")
                break
            case 500:
                alert("服务器内部错误")
                break
            case 501:
                alert("服务器未实现")
                break
            case 502:
                alert("网关错误")
                break
            case 503:
                alert("服务不可用")
                break
            case 504:
                alert("网关超时")
                break
            case 505:
                alert("HTTP版本不受支持")
                break
            default:
                console.log("报错啦");
                
        }
    }
}

/**
 * 查看返回的数据
 * @param url
 * @param params
 * @param data
 */
function landing(url:any, params:any, data:any) {
    if (data.code === -1) {  
        console.log(url,params); 
    }
}
    

使用 src/pages/HomePage/index.tsx

import { observer } from "mobx-react";
import { NavLink, Link, useNavigate, useLocation } from "react-router-dom";
import { Button, Divider } from "antd";
import http from "@/apis";

const HomePage = () => {

  const getRequest = () => {
    return new Promise((resolve, reject) => {
      http(
        "get",
        "http://rap2api.taobao.org/app/mock/314934/userList",
        ""
      ).then(
        (res: any) => {
          console.log("res.data: ", res.data);
          resolve(res);
        },
        (error) => {
          console.log("网络异常", error);
          reject(error);
        }
      );
    });
  };

  return (
    <>
      <div>
        <Divider />
        <Button type="primary" onClick={getRequest}>
          封装axios
        </Button>
      </div>
    </>
  );
};
export default observer(HomePage);