typescript+react项目中配置axios（api）

122 阅读 0 评论 81 点赞

我是靠谱客的博主还单身犀牛，这篇文章主要介绍typescript+react项目中配置axios（api），现在分享给大家，希望可以做个参考。

1.下载相关依赖

复制代码

1
npm i @types/axios -S

2.在src文件夹下创建一个api的文件夹

3.在api文件夹中创建两个以.ts后缀名的文件

4.request.ts中的配置

复制代码

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
import axios from "axios";
 
export const Service = axios.create({
 
    timeout: 8000, //延迟时间
 
    method: 'POST',
 
    headers: {

        "content-Type": "application/x-www-form-urlencoded",
 
        "pc-token": "4a82b23dbbf3b23fd8aa291076e660ec", //后端提供
    }
 
})
 
// 请求拦截
 
Service.interceptors.request.use(config => {
 
    return config
 
})
 
// 响应拦截
 
Service.interceptors.response.use(response => {
 
    return response.data
 
}, err => {
 
    console.log(err)
 
})

5.index.ts文件的配置

复制代码

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
import {
    Service
} from "./request";
interface searchConfig {
    page: number | string
    mod: string
}
interface getConfig {
    page: number | string
}
// 搜索接口
export function searchCar(config: searchConfig) {
    const params = new URLSearchParams()
 
    params.append('page', config.page as string);
    params.append('mod', config.mod);
 
    return Service({
        url: "./api/oldcar/searchCar",
        data: params
    })
}
 
// 列表接口
export function getCarList(config: getConfig) {
    const params = new URLSearchParams()
    params.append('page', config.page as string)
    return Service({
        url: "/api/oldcar/getCarList",
        data: params
    })
}