axios封装简单有效

一、新建一个axios文件夹
新建一个fetch.js文件：

关注我的微信公众号【前端基础教程从0开始】，加我微信，可以免费为您解答问题。回复“1”，拉你进程序员技术讨论群。回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”，领取300G前端，Java，微信小程序，Python等资源，让我们一起学前端。
import axios from ‘axios’;

const TENANT_ID='0'
const ENCRYPT_KEY='shrewshrewshrews'export function fetch(url,method,params={}){//判断obj中的投放范围、类型、状态是否为空let newObjs={}let strs=''for(var item in params){if(params[item]!=''){strs= "newObjs."+item+"='"+params[item]+"'";eval(strs);}}this.body = Object.assign({randomStr: new Date().getTime().toString(),reqDate: formatData('yyyyMMdd'),reqTime: formatData('yyyyMMddhhmmss'),tenantId: TENANT_ID,}, newObjs);let sing=signatureTempGenerate(this.body)let sha256 = require("js-sha256").sha256console.log(sing)console.log(sha256(sing))//这就是你加密之后的密码this.body.signature = sha256(sing);this.params=this.bodyconsole.log(this.params)let data = method.toLocaleLowerCase() === 'get' ? 'params' : 'data';return new Promise((resolve,reject) => {axios({method,url,[data]: params, // 差异点在于data的值headers:{'TENANT_ID':'0',//'Authorization':'bearer '+this.access_token},}).then(response => {resolve(response.data);}).catch(err => {reject(err)})})
}
//签名
function signatureTempGenerate(data) {let keys = Object.keys(data).sort();let stringSignTemp = '';keys.forEach((key) => {if (!data[key] || key === 'password') return null;stringSignTemp = stringSignTemp? `${stringSignTemp}&${key}=${data[key]}`: `${key}=${data[key]}`;});stringSignTemp = stringSignTemp? `${stringSignTemp}&key=${ENCRYPT_KEY}`: `key=${ENCRYPT_KEY}`;return stringSignTemp;
}
function formatData (fmt = 'yyyy-MM-dd hh:mm:ss', date = new Date()) {let o = {"M+" : date.getMonth()+1,"d+" : date.getDate(),"h+" : date.getHours(),"m+" : date.getMinutes(),"s+" : date.getSeconds(),"q+" : Math.floor((date.getMonth()+3)/3),"S"  : date.getMilliseconds()};if(/(y+)/.test(fmt)) {fmt = fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));}for(let k in o) {if(new RegExp("("+ k +")").test(fmt)){fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));}}return fmt;
}

二、在main.js中挂载

import {fetch} from '../../axios/fetch'
//定义全局变量
Vue.prototype.$fetch=fetch;

三、在组件中使用

mounted(){this.$fetch(this.Ce_Host,'get',{format:'json',calback:'',from:'webapp_music',method:'baidu.ting.billboard.billList',type:1,size:10,offset:2}).then((res) => {console.log(res)}).catch(err => {console.log(err)})
},

axios封装简单有效相关推荐

axios的简单封装
前言在每次使用原装的axios发送 http请求时,如果需要token验证,则都需要创建拦截器,添加'token'请求头,或者在config中具体的请求体中添加,是一个非常麻烦的事情. 遇到401, ...
vue中axios封装请求
执行 GET 请求 // 向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (res) {console.log(res); }) . ...
前端学习笔记（16）-Axios封装
1.Axios介绍 1.1 概述 Vue前端开发少不了向服务器请求数据,我们选择axios插件,他是一款功能强大,且易用的网络请求工具. 1.2 全称 ajax i/o system 1.3 功能介绍 ...
axios封装，api接口封装统一管理
axios封装,api接口封装统一管理一. axios说明 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. axios的封装和api接口的统一管理, ...
vite + vue3 + 封装axios + 封装loading + 封装返回顶部
前言前期回顾 vite + vue3 + ts配置<企业级项目>二次封装el-table.分页_0.活在风浪里的博客-CSDN博客封装的功能有哪些?分页.表格排序.文字居中. ...
axios post body参数_Vue开发中的一些问题（axios封装）
关于Vue开发的问题(axios封装) 在博客中查找vue的axios封装,发现其中案例还是很多的,自己项目中有些需求不够. 比如 1.Content-Type 请求头 application/x-w ...
axios设置text html,axios封装动态设置Content-Type
问题如下: 有个问题是这样的后台给的API接口请求类型有两种 'Content-Type': 'application/json' 'Content-Type': 'application/x- ...
vue中将axios封装
在平时写项目中,经常会遇到组件调用同一个接口或者不同接口 import axios from "axios"axios({url: "https://autumnfish ...
vue axios封装获取微信公众号用户的openid
目录 axios封装 openid vue vue+ts axios封装一般会在项目的src目录中,新建一个文件夹,作为网络请求模块,用来封装axios, 创建axios实例: axios.crea ...
ajax和axios封装
Ajax 1.ajax理解 ajax是async JavaScript and xml /异步的js和xml 主要用来实现页面的局部刷新在浏览器里内置了ajxa的核心对象的:XMLHttpRequ ...

axios封装简单有效

axios封装简单有效相关推荐

最新文章

热门文章