【react17+ts】react项目封装axios网络请求并使用-04_react ts应用中封装axios

1.安装基于 promise 的网络请求库axios

npm install axios
1

2.axios封装与使用

2.1 request.js对axios的封装

import axios from 'axios';
import {baseInfo} from "../common/config";
import {getToken,removeToken,removeUsername,removeUserId} from "../common/storage";
let baseURL = baseInfo.baseURL;
let baseURLStorage = baseInfo.baseURLStorage;
export {baseURL,baseURLStorage};
export function requestAdmin(config){
  let Token = getToken();
  if(Token){
    config.headers={
      ...config.headers,
      'Token' : `${Token}`,
      'Authorization' : `token`,
    }
  }
  //使用axios创建公共的配置信息，不需要重复创建
  const instance = axios.create({
    baseURL:baseInfo.baseAdminUrl,
    headers:{...config.headers},
    timeout:100000
  });
  // axios请求拦截器 请求
  instance.interceptors.request.use(config=>{return config;},err=>{console.log(err);})
  // axios响应拦截器 数据返回
  instance.interceptors.response.use(res=>{
    let {code,message} = res.data;
    //判断用户登录的token是否过期
    if(code === 1002){
      res.message = 'token过期，请重新登录';
      res.code = 1002;
      setTimeout(_ =>{
        removeToken();
        removeUsername();
        removeUserId();
      },1000);
    }
    if(message === "Expired token"){
      res.message = 'token过期，请重新登录';
      res.code = 1002;
      setTimeout(_ =>{
        removeToken();
        removeUsername();
        removeUserId();
      },1000);
    }
    return res;
  },err=>{
    console.log(err);
  })
  return instance(config);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

2.2 network/v1/login/index.tsx对axios封装的使用

index.tsx

//引用axios封装函数
import {requestAdmin} from "@/network/request";

/**
 * 请求登录
 * @param data
 */
export function requestLogin(data:any){
    return requestAdmin({
        url:"/login/login",
        data,
        method:"post"
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.3 views/v1/login/index.tsx页面视图中的调用

index.tsx

//引入network的网络请求接口
import { requestLogin } from "@/network/v1/login/index"
interface InitProps{}
const Login:FC<InitProps> = (props:InitProps)=>{
const onFinish = (values: any) => {
        let data = new URLSearchParams();
        data.append('username', "测试数据");
        data.append('password', "测试数据");
        requestLogin(data).then((res: resInterface) => {
            let { code, data,message } = res.data;
            if (code === 200) {
                showSuccess('登录成功');
                setToken(data.token);
                setUserId(data.id);
                setTimeout(_ =>{
                    setLoading(false)
                },1000)
            } else {
                showError(`${message}`);
                setLoading(false)
            }
        }).catch((err:any) => {
            console.log(err);
        })
    };
	return (
        <React.Fragment>
		<Button onClick={onFinish}>登&nbsp;&nbsp;录</Button>
		</React.Fragment>
        )
}

export default Login;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

✨$踩坑不易，还希望各位大佬支持一下$

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/761129