AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

封装axios

2023-01-09 158
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： vue

二次封装axios

序：

​ Axios 是一个基于 promise 的 HTTP 库，用于浏览器和node.js等http客户端，主要用来向后台发送各种业务请求和特殊处理，由于axios支持后台数据交互、拦截请求和响应、取消请求、超时设定、转换json、防御XSRF攻击等特性。

一个axios.js 较完整的代码

import axios from 'axios';
import { ElLoading, ElMessage } from 'element-plus';
// 请求自动携带token
import {getTokenAUTH} from '@/utils/auth';

const pendingMap = new Map();

const LoadingInstance = {
  _target: null,
  _count: 0
};

function myAxios(axiosConfig, customOptions, loadingOptions) {
  const service = axios.create({
    baseURL: 'http://localhost:8888', // 设置统一的请求前缀
    timeout: 10000, // 设置统一的超时时长
  });

  // 自定义配置
  let custom_options = Object.assign({
    repeat_request_cancel: true, // 是否开启取消重复请求, 默认为 true
    loading: false, // 是否开启loading层效果, 默认为false
    reduct_data_format: true, // 是否开启简洁的数据结构响应, 默认为true
    error_message_show: true, // 是否开启接口错误信息展示,默认为true
    code_message_show: false, // 是否开启code不为0时的信息提示, 默认为false
  }, customOptions);

  // 请求拦截
  service.interceptors.request.use(
    config => {
      removePending(config);
      custom_options.repeat_request_cancel && addPending(config); 
      // 创建loading实例
      if (custom_options.loading) {
        LoadingInstance._count++;
        if(LoadingInstance._count === 1) {
          LoadingInstance._target = ElLoading.service(loadingOptions);
        }
      }
      // 自动携带token
      if (getTokenAUTH() && typeof window !== "undefined") {
        config.headers.Authorization = getTokenAUTH();
      }

      return config;
    }, 
    error => {
      return Promise.reject(error);
    }
  );

  // 响应拦截
  service.interceptors.response.use(
    response => {
      removePending(response.config);
      custom_options.loading && closeLoading(custom_options); // 关闭loading

      if(custom_options.code_message_show && response.data && response.data.code !== 0) {
        ElMessage({
          type: 'error',
          message: response.data.message
        })
        return Promise.reject(response.data); // code不等于0, 页面具体逻辑就不执行了
      }

      return custom_options.reduct_data_format ? response.data : response;
    },
    error => {
      error.config && removePending(error.config);
      custom_options.loading && closeLoading(custom_options); // 关闭loading
      custom_options.error_message_show && httpErrorStatusHandle(error); // 处理错误状态码
      return Promise.reject(error); // 错误继续返回给到具体页面
    }
  );

  return service(axiosConfig)
}

export default myAxios;

/**
 * 处理异常
 * @param {*} error 
 */
function httpErrorStatusHandle(error) {
  // 处理被取消的请求
  if(axios.isCancel(error)) return console.error('请求的重复请求：' + error.message);
  let message = '';
  if (error && error.response) {
    switch(error.response.status) {
      case 302: message = '接口重定向了！';break;
      case 400: message = '参数不正确！';break;
      case 401: message = '您未登录，或者登录已经超时，请先登录！';break;
      case 403: message = '您没有权限操作！'; break;
      case 404: message = `请求地址出错: ${error.response.config.url}`; break; // 在正确域名下
      case 408: message = '请求超时！'; break;
      case 409: message = '系统已存在相同数据！'; break;
      case 500: message = '服务器内部错误！'; break;
      case 501: message = '服务未实现！'; break;
      case 502: message = '网关错误！'; break;
      case 503: message = '服务不可用！'; break;
      case 504: message = '服务暂时无法访问，请稍后再试！'; break;
      case 505: message = 'HTTP版本不受支持！'; break;
      default: message = '异常问题，请联系管理员！'; break
    }
  }
  if (error.message.includes('timeout')) message = '网络请求超时！';
  if (error.message.includes('Network')) message = window.navigator.onLine ? '服务端异常！' : '您断网了！';

  ElMessage({
    type: 'error',
    message
  })
}

/**
 * 关闭Loading层实例
 * @param {*} _options 
 */
function closeLoading(_options) {
  if(_options.loading && LoadingInstance._count > 0) LoadingInstance._count--;
  if(LoadingInstance._count === 0) {
    LoadingInstance._target.close();
    LoadingInstance._target = null;
  }
}

/**
 * 储存每个请求的唯一cancel回调, 以此为标识
 * @param {*} config 
 */
function addPending(config) {
  const pendingKey = getPendingKey(config);
  config.cancelToken = config.cancelToken || new axios.CancelToken((cancel) => {
    if (!pendingMap.has(pendingKey)) {
      pendingMap.set(pendingKey, cancel);
    }
  });
}

/**
 * 删除重复的请求
 * @param {*} config 
 */
function removePending(config) {
  const pendingKey = getPendingKey(config);
  if (pendingMap.has(pendingKey)) {
     const cancelToken = pendingMap.get(pendingKey);
     // 如你不明白此处为什么需要传递pendingKey可以看文章下方的补丁解释
     cancelToken(pendingKey);
     pendingMap.delete(pendingKey);
  }
}

/**
 * 生成唯一的每个请求的唯一key
 * @param {*} config 
 * @returns 
 */
function getPendingKey(config) {
  let {url, method, params, data} = config;
  if(typeof data === 'string') data = JSON.parse(data); // response里面返回的config.data是个字符串对象
  return [url, method, JSON.stringify(params), JSON.stringify(data)].join('&');
}

流程分步

文件一般存放位置：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5bbfBxyM-1648830928159)(C:\Users\huawei\AppData\Roaming\Typora\typora-user-images\image-20220401110912102.png)]

1、引入组件

import axios from 'axios';
// 引用qs模块，用来序列化post类型的数据
import qs from 'axios';
import { Message } from 'element-ui';
import store from 'store';

2、设置请求超时和post请求头

​ 通过axios.defaults.timeout可以设置默认的请求超时时间，当数据请求时间超过该设定时间时终止请求，这里我设置了5秒。之前我们在发送post的请求时发现，Vue默认的请求头是application/x-www-form-unlencoded，这种方式Django后台无法接受到数据，所以我这直接给axios重新定义请求头为Content-Type: application/x-www-form-urlencoded。

axios.defaults.timeout = 5000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset-UTF-8';

3、请求拦截

​ 在发送业务请求前进行阻拦，阻拦的目的是在数据发送前对数据进行一定逻辑的处理，比如统一添加token，当然前提是我们在登录的时候将token通过localStorage或者cookie存在本地并更新至store中，然后每次发送请求的时候就去store中提取对应的token赋给header，后台通过token来判断用户是否登录。

// 请求拦截器（请求发出前处理一些需求）
axios.interceptors.request.use(
  config => {
    // 每次发送请求之前判断store中
    const token = store.state.token;
    token && (config.headers.Authorization = token);
    return config;
  },
  error => {
    return Promise.error(error);
  }
)

4、响应拦截

​ 当axios拿到服务器返回给我们的数据，对数据进行一些统一的处理，这里主要针对异常处理，如果后台返回的状态码是200，则正常返回数据，如果请求失败，那么我们就可以根据错误的状态码类型进行一些常规的异常处理方案。

// 响应拦截器（处理响应数据）
axios.interceptors.response.use(
  response => {
    if(response.state === 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  error => {
    let status = error.response.status;
    if (status) {
      switch(status) {
        case 401:
          // 跳转登录页面并将要浏览的页面fullPath传过去
          VueRouter.replace({
            path: '/login',
            query: { redirect: router.currentRoute.fullPath }
          });
          break;
        case 500:
          //  ......具体状态码可以跟后台对接
          break;
        default:
          Message.console.error(error.response.data.message);
          break;
      }
      return Promise.reject(error.response);
    }
  }
)

5、封装get/post/put方法

​ 定义一个get函数，传递有两个参数，参数1url地址，参数2携带的请求参数。然后返回一个promise对象，请求成功时resolve服务器返回 值，请求失败时reject错误。

​ post/put需要注意的就是需要对参数进行序列化操作，否则后台是拿不到你提交的数据，axios中提供了qs模块，可以对参数进行序列化，在axios中引入this.$qs.stringify()，这样在传参前将数据自动处理成键值对形式，这里我们可以看到发送的数据格式为Form Data（请求头 Content-Type: application/x-www-form-urlencoded），后台也正常接收到了数据。

补充：

在POST请求中的 Content-Type 常见的有以下3种形式：

  • Content-Type: application/json
  • Content-Type: application/x-www-form-urlencoded
  • Content-Type: multipart/form-data

现在主流基本在用application/json形式，Axios默认以这种形式工作，我们给后端接口传递参数也简单，直接放在data参数就行了。

// 封装get请求（query请求）
function get(url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params
    }).then(res => {
      resolve(res.data);
    }).catch(err => {
      reject(err.data)
    })
  })
}

// 封装post请求
function post(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, qs.stringify(params))
    .then(res =>{
      resolve(res.data);
    }).catch(err =>{
      reject(err.data);
    })
  })
}

// 封装put请求
function put(url, params) {
  return new Promise((resolve, reject) => {
    axios.put(url,qs.stringify(params))
      .then(response => {
        resolve(response.data);
      }).catch(err => {
        reject(err.data);
      })
  })
}

二次封装：

/*
*url:请求的url
*params:请求的参数
*config:请求时的header信息
*method:请求方法
*/
const request = function ({ url, params, config, method }) {
  // 如果是get请求 需要拼接参数
  let str = ''
  if (method === 'get' && params) {
    Object.keys(params).forEach(item => {
      str += `${item}=${params[item]}&`
    })
  }
  return new Promise((resolve, reject) => {
    axios[method](str ? (url + '?' + str.substring(0, str.length - 1)) : url, params, Object.assign({}, config)).then(response => {
      resolve(response.data)
    }, err => {
      if (err.Cancel) {
      } else {
        reject(err)
      }
    }).catch(err => {
      reject(err)
    })
  })
}

​ 这样我们需要接口请求的时候，直接调用该函数就好了。不管什么方式请求，传参方式都一样。

6、抛出方法

​ 写个导出函数，将方法抛出去，这样其他组件就可以访问到我们封装的方法了，通过提交的方法来判断我们该调用哪个方法。

// 抛出函数，对外的接口
export default function request (method, url, params) {
  if( method === 'get') {
    return get(url, params);
  } else if( method === 'post') {
    return post(url, params);
  } else if( method === 'put') {
    return put(url, params);
  }
}

7、全局注册

​ 全局引入axios.js文件，这样就不用在组件中去调用了，因为我在axios中只有一个默认的函数抛出，所以我们不需要指定方法，直接调用该文件即可。

import request from '@/utils/axios.js'
import Vue from 'vue';
Vue.prototype.$axios = request;

8、组件中使用

this.$axios('post', 'http://127.0.0.1:8000/login', {
  username: this.username,
  password: this.password
})
.then(res =>{
  if(res.data['code'] == 200) {
    this.$store.commit('setToken',res.data.token);
    this.$message({
      message: '登录成功',
      type: 'success'
    })
  this.$router.push('/home/info')
  }
})
.catch(err => console.log(err))

8、组件中使用

this.$axios('post', 'http://127.0.0.1:8000/login', {
  username: this.username,
  password: this.password
})
.then(res =>{
  if(res.data['code'] == 200) {
    this.$store.commit('setToken',res.data.token);
    this.$message({
      message: '登录成功',
      type: 'success'
    })
  this.$router.push('/home/info')
  }
})
.catch(err => console.log(err))
文章标签：
JavaScript
Python
前端开发
数据格式
JSON
关键词：
封装axios
axios封装
XinMo
目录
相关文章
Y2000104
|
4月前
|
JavaScript
vue封装axios（用interceptors封装）
vue封装axios（用interceptors封装）
Y2000104
48 0
热爱技术的小郑
|
1月前
|
JSON JavaScript 前端开发
【Vue面试题二十四】、Vue项目中有封装过axios吗？主要是封装哪方面的？
这篇文章讨论了在Vue项目中封装axios的最佳实践，包括设置接口请求前缀、请求头、状态码、请求方法的封装，以及如何使用请求和响应拦截器来处理token和响应状态，从而简化HTTP请求的配置和错误处理，提高代码的可维护性。
热爱技术的小郑
37 1
【Vue面试题二十四】、Vue项目中有封装过axios吗？主要是封装哪方面的？
广州爱奇迪-伍华聪
|
2月前
|
存储 开发框架 前端开发
基于SqlSugar的开发框架循序渐进介绍（10）-- 利用axios组件的封装，实现对后端API数据的访问和基类的统一封装处理
基于SqlSugar的开发框架循序渐进介绍（10）-- 利用axios组件的封装，实现对后端API数据的访问和基类的统一封装处理
广州爱奇迪-伍华聪
38 2
好奇的菜鸟
|
3月前
|
JavaScript
vue对axios封装
vue对axios封装
好奇的菜鸟
43 2
爱你三千遍斯塔克
|
2月前
|
前端开发
网页设计，若依项目修改（It must be done）02------axios封装后发get请求，axios请求的位置在呢？
网页设计，若依项目修改（It must be done）02------axios封装后发get请求，axios请求的位置在呢？
爱你三千遍斯塔克
33 0
技术宅小温
|
4月前
|
JSON JavaScript 前端开发
＜ 每日份知识快餐：axios是什么？如何在Vue中 封装 axios ？ ＞
本文介绍了前端开发中常用的HTTP客户端库Axios，它基于Promise，支持浏览器和Node.js，特点是功能强大、支持Promise API和并发请求，并能拦截请求和响应。文章强调了理解Axios的内部原理和优化使用的重要性，不仅讲解了基本的安装、导入和使用方法，还阐述了为何选择Axios，包括其丰富的配置选项和良好的浏览器支持。此外，文章探讨了封装Axios的必要性，以减少重复代码和提高代码维护性，并给出了设置接口请求前缀、请求头、超时时间以及封装请求方法和拦截器的示例。通过封装，开发者可以更高效地管理和使用Axios，适应不同项目需求。
技术宅小温
96 0
技术宅小温
|
4月前
|
存储 算法 JavaScript
＜ 今日小技巧：Axios封装，接口请求增加防抖功能 ＞
今天这篇文章，主要是讲述对axios封装的请求，由于部分请求可能存在延时的情况。使得接口可能存在会被持续点击（即：接口未响应的时间内，被持续请求），导致重复请求的问题，容易降低前后端服务的性能！故提出给axios封装的配置里面，新增一个防抖函数，用来限制全局请求的防抖。
技术宅小温
78 0
＜ 今日小技巧：Axios封装，接口请求增加防抖功能 ＞
yma16
|
4月前
|
缓存 前端开发 JavaScript
前端vue3分享——项目封装axios、vite使用env环境变量
前端vue3分享——项目封装axios、vite使用env环境变量
yma16
230 0
微芒不朽
|
4月前
axios封装和配置
axios封装和配置
微芒不朽
56 0
Cool架构
|
4月前
04_装饰器封装axios_get请求
04_装饰器封装axios_get请求
Cool架构
48 0