封装属于自己的axios请求

更新日期: 2020-04-25阅读: 2.3k标签: axios分享

复制链接

新浪微博

QQ 好友

扫一扫分享

摘要

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

axios封装

1、配置环境变量

// 根据不同环境变量选择不同的接口服务器域名
export const BASE_URL = process.env.react_APP_api;

2、创建axios实例

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

// 创建axios实例
const service = axios.create({
  baseURL: BASE_URL,
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  },
  timeout: 5 * 1000 // 请求超时时间
});

3、创建request拦截器

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

// 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拦截器

// 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);
  }
);

来自：https://www.cnblogs.com/BlueBerryCode/p/12882977.html

链接: https://fly63.com/article/detial/9143

封装属于自己的axios请求

摘要

axios封装

axios处理Http请求的基本使用方法总汇

axios的特点与使用_解决处理axios兼容性问题

axios常见传参方式_axios中get/post/put/patch请求

axios-mock-adapter_一个axios调试好用的工具

vue中axios的使用与封装

vue axios不缓存get请求(防止返回304不更新数据)

vue中axios请求的封装

axios基于常见业务场景的二次封装

Vue+Typescript中在Vue上挂载axios使用时报错

vue axios 拦截器