React入门（六）之axios封装_react ts应用中封装axios

1、axios的封装

之前在vue里我们使用过axios发请求，但是在实际开发中，都会对axios进行封装。

步骤较简单：

1. 在src目录下创建utils/service.js路径；

import axios from "axios"
// 创建axios 赋值给常量service 

const service = axios.create({
    baseURL: 共同的路径(url),
    timeout: （超时时间，纯数字，单位毫秒）
    headers: {//请求头
        "Content-Type": "application/json;charset=UTF-8",
        // "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",        
    }
});

// 添加请求拦截器（Interceptors）
service.interceptors.request.use(function (config) {
  // 发送请求之前做写什么
  let token =  localStorage.getItem("token");
  // 如果有token
  if(token){
    // 将token放在请求头
      config.headers.authorization = token;
  }

  return config;
}, function (error) {
  // 请求错误的回调
  return Promise.reject(error);
});

// 添加响应拦截器
service.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 响应错误的回调
  return Promise.reject(error);
});


export default service
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

2. 在src目录下新建api/index.js路径；
   （该文件封装各种请求）

import service from "../utils/services";

// 这个模块封装各种请求方式（如：get，post等等）
export function post(url,params){
    return new Promise(function(resovle,reject){
        service.post(url,params)
        .then(res=>{
            if(!res.data){
                resovle(res);
            }
            resovle(res.data);
        },err=>{
            reject(err);
        })
        .catch(err=>{
            reject(err);
        });
    });
}

export function get(url,params){
    let querystr = "";
    for(let key in params){
        if(params[key]){
            querystr += `${key}=${params[key]}&`
        }
    }

    return new Promise(function(resovle,reject){
        service.get(url+"?"+querystr)
        .then(res=>{
            if(!res.data){
                resovle(res);
            }
            resovle(res.data);
        },err=>{
            reject(err);
        })
        .catch(err=>{
            reject(err);
        });
    });
}
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

3. 新建api/xx.js（用来放每个模块的所有请求）
   如首页

import * as axiosBase from './index.js';

export let get = function (params) {
    params = params || {}
    return axiosBase.GET('/books', params)
}
1
2
3
4
5
6

4. 在组件里调用对应的请求文件
   （即不在组件里发起请求了。）

import {get} from "../../api/index"

//注意：这里的data就是需要的数据，不再是res.data
get().then(data=>{ 
    this.setState({
        data:data
    });
});
1
2
3
4
5
6
7
8