封装一个属于自己的axios请求

摘要

  axios是一个基于promise的HTTP库,可以用于浏览器中进行AJAX请求处理。在项目中,为了实现通用性,封装了一个axios请求。

 

axios封装

1、配置环境变量

1

2

// 根据不同环境变量选择不同的接口服务器域名

export const BASE_URL = process.env.REACT_APP_API;

2、创建axios实例

  创建axios实例可以根据官方文档进行属于自己的配置,具体属性可以参考https://www.kancloud.cn/yunye/axios/234845

1

2

3

4

5

6

7

8

// 创建axios实例

const service = axios.create({

  baseURL: BASE_URL,

  headers: {

    'Content-Type''application/json;charset=UTF-8'

  },

  timeout: 5 * 1000 // 请求超时时间

});

3、创建request拦截器

  在请求、响应被then 或 catch 处理前拦截它们,在发送请求之前可以做些处理或者对请求错误做些什么处理。具体配置可以参考官网。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

// request拦截器

service.interceptors.request.use(

  config => {    // 登录时,Token登录

    // const token =

    //   localStorage.getItem('token') || sessionStorage.getItem('token');

    // if (token) {

    //   config.headers.Authorization = 'JWT ' + token;

    // }

    return config;

  },

  error => {

    // Do something with request error

    console.log(error); // for debug

    return Promise.reject(error);

  }

);

4、创建response拦截器

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

// response 拦截器

service.interceptors.response.use(

  response => {

    const data = response.data;

    if (data.code === 2000) {

      return data.data;

    }

    if (data.code === 4040) {

      return Promise.reject({message: '网络中断'});

    }

    if (data.code === 4030) {

      return Promise.reject({message: '登录过期'});

    }

    return Promise.reject(data);

  },

  error => {

    error.message = '网络超时';

    return Promise.reject(error);

  }

);

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读