requestData.js封装axios

已于 2023-11-20 16:24:44 修改
阅读量134 收藏
点赞数
文章标签： javascript 开发语言 ecmascript
于 2023-07-24 13:33:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ndkfa/article/details/131894334
版权 
/* eslint-disable*/
import axios from 'axios'
import {getLoginUrl} from '../config';
import vue from '../main';
import {urlParamsParse} from '../utils/tool';
import {getGlobalResCode} from '@/utils/global.js';

let appcode;
let admin_name;
let admin_id;
let key;
let institution_id;
let company_id;
let terminal;
// 获取关键信息
function getHingeData() {
    if (appcode) return;
    appcode = sessionStorage.getItem("appcode");
    admin_name = sessionStorage.getItem("admin_name");
    admin_id = sessionStorage.getItem("admin_id");
    key = sessionStorage.getItem("key");
    institution_id = sessionStorage.getItem("institution_id");
    company_id = sessionStorage.getItem("company_id");
    terminal = sessionStorage.getItem('terminal');
}
// 是否已经执行退出操作
let isLogOutAction = false;
// `transformRequest` 允许在向服务器发送前，修改请求数据
// 对 data 进行任意转换处理
const transformRequest = [function (data, headers) {
    if (!data) return data;

    let dataStr = Object.keys(data).reduce((total, key, curIndex, arr) => {
        const value = data[key];
        return total += `${key}=${value}&`
    }, '');

    if (dataStr.slice(-1) === '&') {
        return dataStr.slice(0, -1);
    } else {
        return dataStr;
    }

}];
// 根据terminal添加到url上
const setUrl = function(url) {
    if (!terminal || !url) return '';

    if (url.indexOf('http:') !== -1 || url.indexOf('https:') !== -1) {
        return url;
    }
    url = '/index.php?' + url;
    if (urlParamsParse('v', url)) {
        return url;
    } else {
        if (url.slice(-1) === '&') {
            url += `v=${terminal}`
        } else {
            url += `&v=${terminal}`
        }
        return url;
    }
};
// 转换无效数据
// 把null和void 0的值转为''
const transferInvalidData = (data) => {
    if (!data) return false;
    let newObj = {};
    Object.keys(data).forEach(key => {
        if (data[key] === null || data[key] === void 0) {
            newObj[key] = '';
        } else {
            newObj[key] = data[key];
        }
    });
    return newObj;
};
const instance = axios.create({
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    },
    transformRequest,
});
instance.interceptors.request.use(function(request) {
    request.url = setUrl(request.url);

    return request;
}, function (error) {
    return Promise.reject(error);
});
instance.interceptors.response.use(function (response) {
    let res = response.data;
    const isToLogin = getGlobalResCode('toLogin', res.code);

    if (isToLogin) {
        if (isLogOutAction) return;
        isLogOutAction = true;

        vue.$message.error(res.message || 'ajax错误');
        if (process.env.NODE_ENV === 'production') {
            vue.$store.dispatch('LogOut');
            setTimeout(() => {
                isLogOutAction = false;
                window.location.href = getLoginUrl();
            }, 1200)
        } else {
            console.warn('开发环境，不跳转');
            return Promise.reject();
        }
        return Promise.reject(res);
    } else {
        return res;
    }
}, function (error) {
    return Promise.reject(error);
});

export const requestData = function(url, data={}, method='post', responseType='json', version='v2'){
    getHingeData();
    if (!appcode || !admin_id || !key) {
        if (isLogOutAction) return;
        isLogOutAction = true;

        alert('请重新登录！');
        if (process.env.NODE_ENV === 'production') {
            vue.$store.dispatch('LogOut');
            setTimeout(() => {
                isLogOutAction = false;
                window.location.href = getLoginUrl();
            }, 1200)
        }
        return;
    }
    let reqData = {
        appcode:appcode,
        admin_name:admin_name,
        admin_id:admin_id,
        institution_id:institution_id,
        company_id:company_id,
        reqorigin: 'cloudmanager',
        ...data,
        key:key,
    };
    let config = {
        url,
        method,
        responseType,
    };
    // api版本
    if (version) {
        if (url.indexOf("serviceversion") === -1) {
            config['params'] = {
                serviceversion: version,
                ...config['params'],
            };
        }
    }
    // api版本
    if (version === 'v1') {
        if (url.indexOf("serviceversion") === -1) {
            config['params'] = {
                serviceversion: 'v1',
                ...config['params'],
            };
        }
    }

    if (method === 'post') {
        config['data'] = transferInvalidData({
            ...config['data'],
            ...reqData,
        });
    } else {
        config['params'] = transferInvalidData({
            ...config['params'],
            ...reqData,
        });
    }
    return instance(config);
}

dev.js

// 根据不同的环境更改不同的baseUrl
let baseUrl = ''
let agenturl = ''
let testurl = ''
if (process.env.NODE_ENV === 'development') {
  baseUrl = '/api'
  agenturl = '/agent'
  testurl = '/newApi'
} else if (process.env.NODE_ENV === 'production') {
  if (window.location.protocol === 'https:') {
    baseUrl = ''
    agenturl = ''
    testurl = ''
  } else {
    baseUrl = ''
    agenturl = ''
    testurl = ''
  }
}

export { baseUrl, agenturl, testurl }


http.js 封装

import axios from 'axios'
import qs from 'qs'
import router from '@/router'
import { Message, MessageBox } from 'element-ui'
import { baseUrl, agenturl, testurl } from '@/api/dev'

axios.defaults.timeout = 50000
// axios.defaults.baseURL = baseUrl

// http request 拦截器
axios.interceptors.request.use(
  config => {
    let key = ''
    let admin_id = ''
    if (sessionStorage.getItem('userInfo')) {
      key = JSON.parse(sessionStorage.getItem('userInfo')).key
      admin_id = JSON.parse(sessionStorage.getItem('userInfo')).admin_id
    }
    if (key && admin_id) {
      if (config.method === 'post') {
        config.data = {
          ...config.data,
          admin_id: admin_id,
          key: key,
          appcode: process.env.VUE_APP_APPCODE
          // appcode: '5c3d73a0f1f18c30cqb5zkov'
        }
      } else if (config.method === 'get') {
        config.params = {
          ...config.params,
          key: key,
          admin_id: admin_id,
          appcode: process.env.VUE_APP_APPCODE
          // appcode: '5c3d73a0f1f18c30cqb5zkov'
        }
      }
    }
    if (config.method === 'post' || config.method === 'put') {
      config.data = qs.stringify(config.data)
    }
    config.headers = {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// http response 拦截器
axios.interceptors.response.use(
  response => {
    if (response.data === '' || response.data.length === 0 || response.data === 'undefined' || response.data === undefined) {
      Message.error('数据可能走丢了！')
    }
    if (response.data.code === -100010005) {
      if (document.getElementsByClassName('el-message-box__wrapper').length > 0) {
        return false
      }
      MessageBox.alert(`账号异常<p>账号已在其它终端登录，请知晓</p>`, '提示', {
        confirmButtonText: '确定',
        dangerouslyUseHTMLString: true,
        type: 'warning',
        callback: action => {
          localStorage.clear()
          sessionStorage.clear()
          router.push({ path: '/login' })
          return false
        }
      })
    }
    return response
  },
  error => {
    //  1.判断请求超时
    if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
      Message({
        type: 'error',
        message: '请求超时！'
      })
      // return service.request(originalRequest);//例如再重复请求一次
    }
    //  2.需要重定向到错误页面
    const errorInfo = error.response
    if (errorInfo) {
      // error =errorInfo.data//页面那边catch的时候就能拿到详细的错误信息,看最下边的Promise.reject
      if (errorInfo.status === 500) {
        Message({
          type: 'error',
          message: '服务器出现了问题，请联系管理员！(' + errorInfo.status + ')'
        })
      }
      if (errorInfo.status === 404) {
        Message({
          type: 'error',
          message: '接口出现了未知问题，请联系管理员！(' + errorInfo.status + ')'
        })
      }
      // if (errorInfo.status === 404) {
      //   router.push({
      //     path: "/error/404"
      //   });
      // }
    }
    return Promise.reject(error)
  }
)

/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

// export function get2(url, params = {}) {
//   return new Promise((resolve, reject) => {
//     axios.get(agenturl + url, params).then(
//       response => {
//         resolve(response.data)
//       },
//       err => {
//         reject(err)
//       }
//     )
//       .then(response => {
//         resolve(response.data)
//       })
//       .catch(err => {
//         reject(err)
//       })
//   })
// }

/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */

// export function post(url, data = {}) {
//   return new Promise((resolve, reject) => {
//     axios.post(baseUrl + url, data).then(
//       response => {
//         resolve(response.data)
//       },
//       err => {
//         reject(err)
//       }
//     )
//   })
// }

export function get1(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.get(agenturl + url, data).then(
      response => {
        resolve(response.data)
      },
      err => {
        reject(err)
      }
    )
  })
}

export function post(url, data = {}) {
  return axios.post(baseUrl + url, data).then(
    response => response.data,
    err => err
  ).catch(() => '')
}

export function post2(url, data = {}) {
  return axios.post(agenturl + url, data).then(
    response => response.data,
    err => err
  ).catch(() => '')
}
export function post3(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios(agenturl + url, data, { responseType: 'blob' }, { method: 'post' }).then(
      response => {
        resolve(response.data)
      },
      err => {
        reject(err)
      }
    )
  })
}

/**
 * 封装其他站点下post请求
 * @param url
 * @param data
 * @returns {Promise}
 */

// export function postAgent(url, data = {}) {
//   return new Promise((resolve, reject) => {
//     axios.post(agenturl + url, data).then(
//       response => {
//         resolve(response.data)
//       },
//       err => {
//         reject(err)
//       }
//     )
//   })
// }

// export function testReq(url, data = {}) {
//   return new Promise((resolve, reject) => {
//     axios.post(testurl + url, data).then(
//         response => {
//           resolve(response.data)
//         },
//         err => {
//           reject(err)
//         }
//     )
//   })
// }

// export function fetch(url, params) { // 封装axios的post请求
//   return new Promise((resolve, reject) => { // promise 用法
//     axios.post(url, params).then(response => {
//       resolve(response.data) // promise相关
//     }).catch(error => {
//       reject(error) // promise相关
//     })
//   })
// }

export function postAgent(url, data = {}) {
  return axios.post(agenturl + url, data).then(
    response => response.data,
    err => err
  ).catch(() => '')
}

export function testReq(url, data = {}) {
  return axios.post(testurl + url, data).then(
    response => response.data,
    err => err
  ).catch(() => '')
}

export function fetch(url, params) { // 封装axios的post请求
  return axios.post(url, params).then(
    response => response.data, // promise相关
    err => err
  ).catch(() => 'error') // promise相关
}

export default { // 暴露htto_mock方法，即模拟数据页面中用到的方法
  http_mock(url, params) {
    return fetch(url, params)
  }
}



调用
// 标签系统
import { post2 } from '@/api/https'

const labelSystem = {
  UsertagSortApi(data) {
    return post2('tag/v4000/company/Usertag/settagsort/?', data)
  },

}

export default labelSystem

Vue3

import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import qs from 'qs'
import { Session } from '/@/utils/storage';

// 配置新建一个 axios 实例
const service = axios.create({
	baseURL: window.location.protocol + import.meta.env.VITE_API_URL as any,
	timeout: 50000,
	// headers: { 'Content-Type': 'application/json' },
})

// 添加请求拦截器
service.interceptors.request.use(
	(config) => {
		const userInfo = Session.get('userInfo')
		// console.log(' userInfo :', userInfo)
		let infos = {}
		if (userInfo) {
			infos = {
				institution_id: userInfo.institution_id || '',
				company_id: userInfo.company_id || '',
				admin_id: userInfo.admin_id || '',
				key: userInfo.key || '',
				admin_truename: userInfo.truename || '',
				admin_name: userInfo.username || '',
				admin_wechat_subject: userInfo.wechat_subject || ''
			}
		}
		// console.log(' infos :', infos)
		config.data = { ...config.data, appcode: import.meta.env.VITE_App_Code }
		if (config.method === 'post' || config.method === 'put') {
			config.data = { ...config.data, ...infos, }
			config.data = qs.stringify(config.data)
		}
		if (config.method === 'get') {
			config.data = { ...config.data, ...infos, }
			config.url = config.url + '&' + qs.stringify(config.data)
		}
		// console.log(' config 1 => :', config)
		config.headers = {
			'Content-Type': 'application/x-www-form-urlencoded'
		}
		return config;
	},
	(error) => {
		// 对请求错误做些什么
		return Promise.reject(error);
	}
);

// 添加响应拦截器
service.interceptors.response.use(
	(response) => {
		// 对响应数据做点什么
		if (response.status === 200) {
			return response.data
		}
	},
	(error) => {
		// 对响应错误做点什么
		if (error.message.indexOf('timeout') != -1) {
			ElMessage.error('网络超时');
		} else if (error.message == 'Network Error') {
			ElMessage.error('网络连接错误');
		} else {
			if (error.response.data) ElMessage.error(error.response.statusText);
			else ElMessage.error('接口路径找不到');
		}
		return Promise.reject(error);
	}
);

// 导出 axios 实例
export default service;




//封装

import request from '/@/utils/request';

/**
 * 登录api接口集合
 * @method signIn 用户登录
 * @method signOut 用户退出登录
 */
export default {
	keywordGetlistApi: (params: object) => { //关键字列表
		return request({
			url: '地址',
			method: 'post',
			data: params
		})
	},
}

封装request.js
Bald_monster的博客
09-15 520
封装request.js import axios from 'axios' import store from '@/store' import router from '@/router' import { Message } from 'element-ui' import qs from 'qs' const request = axios.create({ timeout: 2000 // baseURL: // Headers: }) function getBaseURL (u
Axios源码解析（三）：流程分析
f18855666661的博客
03-06 280
1. package.json 首先看下package.json文件中的内容，package.json是整个项目的包配置文件。package.json中的main: index.js字段指定了Axios库的入口文件。 2. index.js module.exports = require('./lib/axios'); index.js导入了./lib/axios文件导出的数据，并将其导出。 3. /lib/axios.js 该文件的重点在createInstance函数，在该函数的内部创建axios实
封装request方法 request.js
10-13
封装的uni.request工具，原生微信也同样适用（将uni改成wx）
request.js的封装
chh196196的博客
05-27 125
import store from “@/store/index.js” let token = uni.getStorageSync(‘token’) // #ifdef H5 var baseUrl = ‘/api’ // #endif if (process.env.NODE_ENV === ‘development’) { // 开发环境:测试地址 // #ifndef H5 var baseUrl = 'http://'; // #endif }else if(process.env.N
一文详解 requests 库中 json 参数和 data 参数的用法
最新发布
2401_83396248的博客
02-07 805
在requests库当中，requests请求方法，当发送post/put/delete等带有的请求时，有json和data2个参数可选。众所周知，http请求的请求体格式主要有以下4种：那么针对以上的请求格式，都分别使用什么参数呢？接下来一一示例说明。
axios请求封装（request.js）
qq_39608291的博客
09-21 463
【代码】axios请求封装（request.js）
前端入门之(axios解析)
vv_bug
11-16 7137
前言：vue已经放弃维护vue-resource了，然后推荐使用axios，这一推荐不得了了，axios的人气大增啊，在github已经是50多k的star了，axios算是成功打入了vue全家桶了，既然官方这么推荐，我们接下来就来研究一下axios，顺便再啰嗦几句，我们一直在研究这个框架那个框架的，其实说白了，框架其实就是别人的一种编程思想，都是一些大牛总结的一些编程经验，形象一点就比如一辆汽车...
Axios 源码解析-完整篇
2401_89740686的博客
12-20 934
源码目录结构先看看目录说明，如下执行流程先看看整体执行流程，有大体的概念，后面会细说创建单独实例，或直接使用axios实例(request方法是入口，等调用都会走进request进行处理请求拦截器请求数据转换器，对传入的参数data和header做数据处理，比如适配器，判断是浏览器端还是node端，执行不同的方法响应数据转换器，对服务端的数据进行处理，比如响应拦截器，对服务端数据做处理，比如token失效退出登陆，报错dialog提示返回数据给开发者。
Vue+TS中全局绑定axios、storage、接口地址的方法
Always-Learning
01-23 2169
全局绑定axios(在TypeScript中) 通过cnpm安装到项目中。 cnpm i axios --save 在main.ts中引入下面的接口和组件 import Axios,{AxiosInstance} from 'axios' 在main.ts中进行如下声明 declare module '@vue/runtime-core' { interface ComponentCustomProperties { $axios: AxiosInstance } }
Axios源码研究学习系列---xhr请求模块大概分析
wujimiao的专栏
03-22 958
改变是人生的定律，专注于过去和现在的人，必将错过未来 首先文件结构，插件标准模式，严格模式，用ES6语法promise返回，所以就是常见的axios.get(url).then(res=>{})形式 'use strict'; var utils = require('./../utils'); var settle = require('./../core/settle'); v...
18--request.js(封装axios)请求服务器
xu_ze_qin的博客
06-07 742
request.js 响应，比如token无效和服务器错误，会弹窗提示 import Vue from 'vue' import axios from 'axios' import Qs from 'qs' // 引入内置的组件 import {Dialog} from 'cube-ui' Vue.use(Dialog) import {Toast} from 'cube-ui' Vue.use(Toast) const baseUrl = process.env.NODE_ENV === 'product
小程序封装request
huang_jimei的博客
05-05 172
一、新建一个文件夹，下新建一个request.js文件。
vue 基于axios封装request接口请求——request.js文件
m0_67393593的博客
03-03 2463
目录 了解几个Content-type类型 第一种：application/json;charset=UTF-8 第二种：multipart/form-data 第三种： application/x-www-form-urlencoded 第一步新建request.js文件 第二步新建services/apiUrl文件 第三步新建services/index.js文件 最后如何使用封装好的request请求 了解几个Content-type类型 **Content-type类型：**代表发送端（客户端|服
axios封装请求request.js等工具函数较完整 三方登录
qq_34114535的博客
12-25 724
/ Axios 无感知刷新令牌，参考 https://www.dashingdog.cn/article/11 与 https://segmentfault.com/a/1190000020210980 实现。baseURL: process.env.VUE_APP_BASE_API + '/admin-api/', // 此处的 /admin-api/ 地址，原因是后端的基础路径为 /admin-api/return ['日', '一', '二', '三', '四', '五', '六'][value]
关于request中的params和data的使用
Superman980527的博客
04-09 3028
params:字典或字节序列，作为参数增加到链接中 data:字典，字节序列或文件对象，作为请求的 get中只能使用params进行参数的表示 post中既能使用params,也能使用data进行请求参数的内容表示 -----------------------------仅供学习交流，如有侵权，请联系--------------------------------------- ...
WebOperator webOperator = webOperatorService.getOperatorbyAppKey(appkey); RequestData requestData = new RequestData(); requestData.setAgentNo(hawbNo.toUpperCase()); requestData.setOperCode(webOperator.getOperCode()); requestData.setData(paramXml.trim().getBytes()); requestData.setType("DHL"); requestData.setModiDate(DataUtils.getDate("yyyy-MM-dd HH:mm:ss"));代码优化
05-24
RequestData requestData = new RequestData(); requestData.setAgentNo(hawbNo.toUpperCase()); requestData.setOperCode(webOperator.getOperCode()); requestData.setData(data); requestData.setType("DHL"); ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值