Vue2项目中如何全局封装axios实现高效请求调用？

本文共计1153个文字，预计阅读时间需要5分钟。

目录 + Vue2全局封装axios + 封装axios + 封装API + 函数 + Vue2.X中axios简单封装和多功能封装 + Vue2.X中axios的简单封装 + 多功能封装 + Vue2全局封装axios + 封装axios + 第一步 1.src + 目录中新建utils文件夹 + utils文件

目录

• vue2全局封装axios
• 封装axios
• 封装api 函数
• vue2.X中axios简单封装和多功能封装
• vue2.X 中axios的简单封装
• 多功能封装

vue2全局封装axios

封装axios

第一步

• 1.src 目录中新建utils文件夹
• 2.utils文件中建立localhost', //远程演示服务地址,可用于直接启动项目 target: '10.1.100.248:8000/api', // target: '10.1.6.67:8033', ws: true, pathRewrite: { '^/api': '/' } } } } };

  多功能封装

  这种为了更好的分离代码，需要创建两个文件interceptor.js和request.js

  1.创建request文件夹，我的项目目录如下

  interceptor.js 代码如下

  /** * Author：abner ，修改于5月28 * 生成基础axios对象，并对请求和响应做处理 * 前后端约定接口返回解构规范 * { * code:200, * data:"成功", * msg: "操作成功" * success: true * } */ import axios from 'axios' import { Message } from 'element-ui' import { getToken } from '@/util/auth'; // 获取token值的方法，如何没有用token验证删掉即可 // 创建一个独立的axios实例 const service = axios.create({ // 设置baseUr地址,如果通过proxy跨域可直接填写base地址 baseURL: '/api', // 定义统一的请求头部 headers: { // 'Authorization': ``, // 此处对应后台AOP验证, 'Content-Type': 'application/json' //默认方式提交数据 // 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' //表单方式提交数据 }, // 配置请求超时时间 timeout: 10000, // 如果用的JSONP，可以配置此参数带上cookie凭证，如果是代理和CORS不用设置 withCredentials: true }); // 请求拦截 service.interceptors.request.use(config => { // 在header中自定义token参数名：tokenHeader，可添加项目token config.headers[tokenHeader] = getToken() return config; }); // 返回拦截 service.interceptors.response.use((response) => { // 获取接口返回结果 const res = response.data; // code为200，直接把结果返回回去，这样前端代码就不用在获取一次data. if (res.code === 200) { return res; } else if (res.code === 10000) { // 10000假设是未登录状态码 Message.warning(res.msg); // 也可使用router进行跳转 window.location.href = '/#/login'; return res; } else { // 错误显示可在service中控制，因为某些场景我们不想要展示错误 // Message.error(res.message); return res; } }, () => { Message.error('网络请求异常，请稍后重试!'); }); export default service;

  request.js中你需要知道的

  这里需要说明的是请求方式那里的判断，我们需要知道axios不同请求方式默认传参的方式是不同的，比如：

  1.post请求我们一般都用data:{} 这中方式传参

  2.get请求我们一般都用params:{} 这中方式传参

  又比如

  

  //如果服务端将参数作为对象来封装接受 axios.delete('demo/url', { data: { id: 123, name: 'Henry', }, timeout: 1000, ...//其他相关配置 }) //如果服务端将参数作为url参数来接受，则请求的url为:www.demo/url?a=1&b=2形式 axios.delete('demo/url', { params: { id: 123, name: 'Henry', }, timeout: 1000, ...//其他相关配置 })

  我们需要对不同的请求，不同的情况进行判断处理

  request.js 代码如下

  /** * request.js * 通过promise对axios做二次封装，针对用户端参数，做灵活配置 * Author：abner ，修改于5月28 */ import { Message, Loading } from 'element-ui'; import instance from './interceptor' /** * 核心函数，可通过它处理一切请求数据，并做横向扩展 * @param {url} 请求地址 * @param {params} 请求参数 * @param {options} 请求配置，针对当前本次请求； * @param loading 是否显示loading * @param mock 本次是否请求mock而非线上 * @param error 本次是否显示错误 */ function request(url, params, options = { loading: true, mock: false, error: true }, method) { // let loadingInstance = ''; // 请求前loading // if (options.loading) loadingInstance = Loading.service({background:'transparent'}); return new Promise((resolve, reject) => { let data = {} // get请求使用params字段 if (method == 'get') data = { params } // post请求使用data字段 if (method == 'post') data = { data: params } // delete请求使用params字段 if (method == 'delete') data = { params } // 通过mock平台可对局部接口进行mock设置 if (options.mock) url = 'www.mock.com/mock/xxxx/api'; instance({ url, method, ...data }).then((res) => { // 此处作用很大，可以扩展很多功能。对返回的数据进行统一处理 if (res && res.code === 200) { resolve(res.data); } else { // 通过配置可关闭错误提示 if (res && options.error) Message.error(res.msg); reject(res); } }).catch((error) => { Message.error(error.message) }).finally(() => { // loadingInstance.close(); }) }) } // 封装GET请求 function get(url, params, options) { return request(url, params, options, 'get') } // 封装POST请求 function post(url, params, options) { return request(url, params, options, 'post') } // 封装DELETE请求 function Delete(url, params, options) { return request(url, params, options, 'delete') } export default { get, post, Delete }

  使用步骤

  1.在main.js中添加

  import request from './api/request/request' Vue.prototype.request = request;

  2.在方法中直接使用

  methods: { getUnitTabledata() { let _self = this; _self.request .get("/lnjzxh-awards-mgt/lnjzxh/award/serial/unit/list/page", { awardName: _self.searchName, status: _self.statusValue, account: _self.account, createDate: _self.pickerValue, current: _self.page.currentPage - 1, size: _self.page.pageSize, }) .then((res) => { _self.page.total = res.total; _self.tableData = res.records; }); }, }

  以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。