位置: IT常识 - 正文

clone下来的vue项目出现“An unknown git error occurred”,vue全局挂载axios及配置全局请求和响应拦截,uni-app的全局请求和响应拦截,对请求方法的封装(vue clonedeep)

编辑:rootadmin
clone下来的vue项目出现“An unknown git error occurred”,vue全局挂载axios及配置全局请求和响应拦截,uni-app的全局请求和响应拦截,对请求方法的封装 文章目录前言一、如何解决clone下来的vue项目出现“An unknown git error occurred”?二、vue全局挂载axios并设置全局的请求和响应拦截1.先下载安装好axios,这个就不用多说了2,vue2中的全局挂载:3,在vue3中我们又应该怎么全局挂载axios呢?三,在vue中设置全局的请求和响应拦截四,uni-app项目中怎么配置全局拦截五,如何在vue/uni-app项目中封装请求方法前言

推荐整理分享clone下来的vue项目出现“An unknown git error occurred”,vue全局挂载axios及配置全局请求和响应拦截,uni-app的全局请求和响应拦截,对请求方法的封装(vue clonedeep),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue克隆,vue克隆数据,clone对象,clone方法,vue clonedeep,vue clone,clone(true),clone(true),内容如对您有帮助,希望把文章链接给更多的朋友!

今天要介绍的是clone下来的vue项目出现“An unknown git error occurred”的问题和vue全局挂载axios及配置全局请求和响应拦截,uni-app的全局请求和响应拦截的实现和对请求方法的封装。

一、如何解决clone下来的vue项目出现“An unknown git error occurred”?

我们经常从GitHub上下载项目的话可能对这类错误见的比较多。首先,这是一个SSH的错误,我们需要把ssh改为https,可以输入以下指令:

git config --global http.proxy http://127.0.0.1:1080 git config --global https.proxy https://127.0.0.1:1080

然后再重新下载npm即可。

二、vue全局挂载axios并设置全局的请求和响应拦截1.先下载安装好axios,这个就不用多说了2,vue2中的全局挂载:

我们在vue2中全局挂载axios的方法一般是这样: 在入口文件main.js中:

//先导入axios:import Axios from 'axios';//然后使用prototype将axios添加为vue实例的原型属性;Vue.prototype.$http = Axios;

这样就可以在其他的组件里面不经过导入就可以直接通过this.$http使用axios;

3,在vue3中我们又应该怎么全局挂载axios呢?

要认识到vue3与vue2的区别,vue3取消了Vue.prototype,并且提供了新的用于全局挂载属性或对象的API:globalProperties:

import axios from 'axios';app.config.globalProperties.$http = axios;

和上面类似,要调用axios就不用再次导入,但是可以直接使用$http吗?不能! 在vue3中一个属性或者对象若是想要在所有的组件实例内被访问到的话,注册挂载到全局的property 的对象只是第一步,要想调用全局的对象或者属性需要通过getCurrentInstance获得当前的实例,再由当前的实例找到全局实例对象appContext,进而获取全局实例config.globalProperties; 在组件中写法如下:

const currentInstance = getCurrentInstance();const { $http } = currentInstance.appContext.config.globalProperties;

此时在组件内就可以使用$http调用axios了; 实际上,globalProperties是对Vue2中的prototype的一种替换,与任何全局的东西一样,必须谨慎使用,需要注意的是,若是全局属性与组件自己的属性发生冲突的话,组件自身的属性是优先的。

三,在vue中设置全局的请求和响应拦截

我们可以在项目中指定的目录下创建一个专门用于配置拦截器的文件,我们可以在这里对axios进行统一的封装。

// 先导入axios:import axios from "axios";// 请求路径:const ipAddress1 = 'http://192.168.1.105:8080/api/v1';const ipAddress2 = 'http://192.168.1.117:8080/api/v1'// 自带上token的方法:const addToken = (config: any) => { // 检测缓存中是否带有token: if (sessionStorage.getItem('token')) { // 若是配置中带有请求头的话直接加上token if (config.headers) { return config.headers.authorization = sessionStorage.getItem('token'); } // 配置信息中若是没有请求头的话也可以让其加上请求头,再带上token: config.headers = { authorization: sessionStorage.getItem('token') } }}// 创建一个axios的对象:const instance = axios.create({ baseURL: `${ipAddress1}`, timeout: 3000, headers: { }})// 配置全局请求拦截:// 请求拦截器:可以根据需要修改配置instance.interceptors.request.use((config: any) => { addToken(config);//带上token; return config;}, (err: any) => { return Promise.reject(err);})// 响应拦截器:可以根据需要修改配置instance.interceptors.request.use((res: any) => { return res;}, (err: any) => { return Promise.reject(err);})// 导出请求对象:export default instance;clone下来的vue项目出现“An unknown git error occurred”,vue全局挂载axios及配置全局请求和响应拦截,uni-app的全局请求和响应拦截,对请求方法的封装(vue clonedeep)

一般的请求拦截就是这样配置。那么我们将其导入入口文件main.js/ts即可:

import "../src/http/interceptor";

然后在项目的任何地方发送网络请求,拦截器都会生效;

四,uni-app项目中怎么配置全局拦截

在uni-app中要配置拦截器其实也差不了太多,也是在指定的目录下创建一个配置文件,基本内容一般为:

// 带上默认路径:const BASE_URL:String="https://jsonplaceholder.typicode.com"// 带上token的方法;function addToken(args:any){ if(uni.getStorageSync("token")){ if(args.header){ return args.header.authorization=uni.getStorageSync("token"); } args.header={ authorization:uni.getStorageSync("token") } }}// 用于配置全局请求拦截器uni.addInterceptor("request",{ invoke(args){ // 配置默认请求方式: if(args.method===undefined) return args.method="POST"; // 获取token args.url=BASE_URL+args.url addToken(args) console.log('拦截器生效') }, success({ data:res }){ if(res.status===511){ uni.reLaunch({ url: '/pages/login_register/login' }) } }})

然后在全局的入口文件main.js/ts中导入:

// 导入全局拦截:import "@/http/interceptor"

发送网络请求的时候即可生效。 值得一提的是上面请求拦截器中有个invoke回调函数,表示拦截前触发,可以在其中先做一些基本的配置,比如添加请求路径,获取token等等。

五,如何在vue/uni-app项目中封装请求方法

一般我们进行网络请求的时候使用的都是异步处理方法,因为同步等待网络请求的响应可能会导致后续的数据、页面卡顿或者无法加载且执行效率低下。一般我们可以使用promise或者async await的方法进行封装调用。 vue项目: 我们以http目录作为请求拦截、请求方法封装的目录: 我们在request_methods.ts中封装好请求的方法: 使用promise,方便再调用导出的时候使用async await一起使用,效果更佳。

// 封装各种请求的方法:import http from '../http/interceptor';import qs from 'qs';// 为参数对象option编写接口:interface option { // option的基本选项:请求路径,请求参数,成功回调和失败回调; url: any, data: Object, headers?: any, params?: Object, success(res: any): any, fail(err: any): any}// 用来json化参数的工具:// import qs from 'qs';// get方法:const axiosGet = (option: option) => { http.get( option.url, { params: { ...option.data }, headers: option.headers, }, ).then((res: Object) => option.success(res)) .catch((err: Object) => option.fail(err))}// post方法:const axiosPost = (option: option) => { http.post( option.url, JSON.stringify( { ...option.data }, ), { headers: option.headers, } ).then((res: Object) => option.success(res)) .catch((err: Object) => option.fail(err))}// 导出基本的请求方法:export { axiosGet, axiosPost,}

接下来我们再到request.ts中进一步封装:

import { axiosGet, axiosPost } from "./requestMethods";import axios from 'axios';// 测试的方法:const myGetRequest = (url: String, data?: Object, headers?: any) => { return new Promise((resolve, reject) => { // 此处的函数内以一个符合request_methods.ts中option接口的对象作为参数 axiosGet({ url: url, data: data, headers: headers, success: function (res: any) { // console.log('请求结果:', res); resolve(res); }, fail: function (err: any) { reject(err); } }) })}// post测试方法:const myPostRequest = (url: String, data?: Object, headers?: any) => { return new Promise((resolve, reject) => { // 此处的函数内以一个符合request_methods.ts中option接口的对象作为参数 axiosPost({ url: url, data: data, headers: headers, success: function (res: any) { resolve(res); }, fail: function (err: any) { reject(err); } }) })}export { myGetRequest, myPostRequest}

上面的请求方法都是返回一个Promise,也符合async await语法对promise的处理。 那么接下来基本就像套公式一样在组件中调用request.ts中的请求方法了,举个栗子:

//部分代码://导入对应的请求方法:import { myPostRequest } from '../../http/request';......const sendRegister = async (): Promise<any> => { // 创建一个临时参数对象: let templeParams: Object = { cardId: state.userInput[0].value, password: state.userInput[1].value, major: state.depCla[0].value + state.depCla[1].value } //请求头: let headers = { 'Content-Type': 'application/json' }; try { // 要传入的为请求路径,请求参数和请求头可选。 const { data: res } = await myPostRequest("/scholarship/user/register", templeParams, headers); console.log(res); if (res.code === 200) { //执行其他回调,success方法我没在这里写。 success(); } } catch (err: any) { console.log('error:', err); } // 清除临时参数对象: templeParams = null; headers = null;}

上面就使用asyc和await处理请求方法。

uni-app项目: 我们以http目录作为请求拦截、请求方法所在的目录, 我们在request_methods.ts中封装好请求的方法:

import qs from 'qs';// 使用typescript中的接口用于规范请求参数optioninterface option { url: any, data: Object, method: any, success(res: any): any, fail(err: any): any}const reqMethod = (option: option) => {uni.request({ url: option.url, data: qs.stringify({ ...option.data }), method: option.method, success: function (res: any) { option.success(res); }, fail: function (err: any) { option.fail(err); } })}export { reqMethod }

在request.ts中进一步封装:

import { reqMethod } from "./request_methods";// 以下为项目中各处需要导出的请求方法,全部使用promise加async aeait方法;// 测试请求的方法是否可行:const getNews = (requestUrl: String) => {return new Promise((resolve, reject) => { reqMethod({ url: requestUrl, method: 'GET', data: {}, success: function (res: any) { resolve(res); }, fail: function (err: any) { reject(err); } }) })}export { getNews }

使用的方法和vue项目中的差不多,我就不再多说了:

//部分代码://记得导入getNews方法;const myRequest = async (): Promise<any> => {try {const {data: res} = await getNews('路径');console.log(res);} catch (err: any){console.log("error:", err);}//自行处理语句;}

内容有点多,就当是记录了。欢迎小伙伴们一起交流学习。

本文链接地址:https://www.jiuchutong.com/zhishi/297533.html 转载请保留说明!

上一篇:基于 transformers 的 generate() 方法实现多样化文本生成:参数含义和算法原理解读(基于transformers的nlp入门 pdf)

下一篇:项目部署,一点也不难!(项目部署计划)

  • iqoo5是曲面屏手机吗(iq5是不是曲面屏)

    iqoo5是曲面屏手机吗(iq5是不是曲面屏)

  • 手机2g网络怎么弄成4g(手机2g网络怎么回事)

    手机2g网络怎么弄成4g(手机2g网络怎么回事)

  • iPhonexr屏幕左上角有个印

    iPhonexr屏幕左上角有个印

  • 显卡挡板怎么拆(机箱显卡挡板怎么拆)

    显卡挡板怎么拆(机箱显卡挡板怎么拆)

  • 单反af mf是什么意思(单反af是什么功能)

    单反af mf是什么意思(单反af是什么功能)

  • 魅族17屏幕多大(魅族17屏幕多大尺寸)

    魅族17屏幕多大(魅族17屏幕多大尺寸)

  • iphone相册突然清空(iphone相册突然被清空)

    iphone相册突然清空(iphone相册突然被清空)

  • 手机号被恶意举报停机(手机号被恶意举报为骚扰电话怎么办)

    手机号被恶意举报停机(手机号被恶意举报为骚扰电话怎么办)

  • 抖音视频删了重发有影响吗(抖音视频删了重发会被限流吗)

    抖音视频删了重发有影响吗(抖音视频删了重发会被限流吗)

  • iphone711版本怎么分屏(苹果7手机版本11.4.1怎样升最新版本)

    iphone711版本怎么分屏(苹果7手机版本11.4.1怎样升最新版本)

  • 6s屏幕坏了能用6的吗(6s屏幕坏了能用7的吗)

    6s屏幕坏了能用6的吗(6s屏幕坏了能用7的吗)

  • 华为手环只能华为手机用吗(华为手环只能华为手机吗)

    华为手环只能华为手机用吗(华为手环只能华为手机吗)

  • 探探怎么快速解除禁言(探探怎么样才能解除)

    探探怎么快速解除禁言(探探怎么样才能解除)

  • 小米多亲能上微信吗(小米多亲qin1s+微信功能)

    小米多亲能上微信吗(小米多亲qin1s+微信功能)

  • 微信不是好友能举报投诉吗(微信不是好友能拍一拍吗)

    微信不是好友能举报投诉吗(微信不是好友能拍一拍吗)

  • 移出群聊别人看的见吗(移出群聊别人看的见嘛)

    移出群聊别人看的见吗(移出群聊别人看的见嘛)

  • 华为nova5pro耳机设置教程(华为nova5pro耳机孔在哪里怎么插)

    华为nova5pro耳机设置教程(华为nova5pro耳机孔在哪里怎么插)

  • qq音乐桌面歌词怎么设置(qq音乐桌面歌词怎么移动不了)

    qq音乐桌面歌词怎么设置(qq音乐桌面歌词怎么移动不了)

  • 苹果6s怎么上下分屏(苹果6s上下键不能用,喇叭无声)

    苹果6s怎么上下分屏(苹果6s上下键不能用,喇叭无声)

  • 苹果手机怎样唤醒小爱同学(苹果手机怎样唤醒它)

    苹果手机怎样唤醒小爱同学(苹果手机怎样唤醒它)

  • 华为pot一al00a是什么型号(华为 pot al00a)

    华为pot一al00a是什么型号(华为 pot al00a)

  • 厦门公交可以用支付宝吗(厦门公交可以用云闪付吗)

    厦门公交可以用支付宝吗(厦门公交可以用云闪付吗)

  • 苹果XR?iPhoneXS XSMAX区别(苹果14pro)

    苹果XR?iPhoneXS XSMAX区别(苹果14pro)

  • 0pp0手机售后电话(0ppo手机的售后服务电话)

    0pp0手机售后电话(0ppo手机的售后服务电话)

  • 白鹤芋的养殖方法与注意事项(白鹤芋的养殖方法和注意事项)

    白鹤芋的养殖方法与注意事项(白鹤芋的养殖方法和注意事项)

  • mkinitrd命令  建立ramdisk映像文件(mkdir命令怎么用)

    mkinitrd命令 建立ramdisk映像文件(mkdir命令怎么用)

  • 注册会计师考试时间2023
  • 中级考试报了三门,只考两门行吗
  • 计提房产税和土地使用税附件
  • 删除申报记录什么意思
  • 资产负债表中未交税金负数表示什么
  • 库存商品暂估后怎么结转
  • 自产自销发票可以抵扣增值税发票吗
  • 软件行业个人所得税
  • 房地产企业土地成本分摊方法
  • 其他应付款在现金流量表中应该填哪里
  • 退回投标保证金分录
  • 公司业务往来
  • 在建工程非应税项目有哪些?
  • 计提利息怎么做账
  • 公司改名字麻烦不
  • 印花税的计税金额
  • 发票认证系统查不到发票
  • 发票校验码后六位图解
  • 应收账款怎么样转入以前年度损益调整
  • 房地产开发企业的土地使用权计入哪里
  • 本月发票有红充这月成本怎么做账?
  • 返修产品如何账务处理
  • 联想thinkpad安装win7方法
  • 鸿蒙 功能
  • 删除打印机如何添加
  • 其他应收款的二级科目有备用金和老板名可以吗?
  • php使用pdo连接数据库
  • 平安树的养殖方法和浇水时间
  • php7 数组
  • PHP:pg_field_prtlen()的用法_PostgreSQL函数
  • 长期股权投资初始投资成本和入账价值
  • 本年利润怎么结转到未分配利润分录
  • wordpress shortcode
  • css单行文本溢出隐藏
  • php 替换字符
  • thinkphp函数有哪些
  • php的运行环境有哪些
  • makefile 编译选项
  • wordpress mobile themes
  • 往来款的账务处理
  • C++ 使用dll路径不在当前路径时如何调用
  • 异地如何申报纳税
  • 小微企业如何升级一般纳税人
  • sqlserver2005 xml字段的读写操作
  • 配置英文
  • SQL2005Express中导入ACCESS数据库的两种方法
  • 高新技术企业三季度申报所得税研发费加计怎么扣除
  • 企业将重组债务转为资本的会计处理
  • 什么叫总分类账簿
  • 发票税额不全能抵扣吗
  • 制造费用和直接人工的关系
  • 研发费用加计扣除的条件
  • 房地产企业暂估成本所得税汇算
  • 账外资产处理
  • 收到预付卡的发票是否可以报销呢?
  • 税控盘清卡时间
  • 捐赠利得计入资产成本吗
  • 税收返还如何做账
  • MySQL replace into 语句浅析(一)
  • window装机必备应用
  • windows Server 2008配置IE使用代理操作步骤
  • linux的用户
  • billmoney是什么意思
  • win10 edge浏览器崩溃
  • u3d怎么导入贴图
  • 批处理作用
  • 批处理修改文件后缀名
  • ie浏览器怎么设置打开网页在同一个窗口
  • 怎么设置网页就用指定浏览器
  • 批处理中for语句的哪个参数表示目录
  • unity音乐thefatrat
  • label jsp
  • Node.js中的全局对象有
  • viewstock
  • python中deque
  • 用python简单代码
  • python的urllib
  • 消费税抵扣范围包括哪些
  • 申请ipo申请到审批要多久
  • 加强党的作风建设是目前全党的中心
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设