位置: 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)

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

  • 企业所得税工会经费调整
  • 房地产开发企业简易计税方法 可以扣除吗
  • 差额征税是如何计算的
  • 建设单位施工现场补助
  • 财务费用多好还是少好
  • 货品调拨的意义
  • 物业费按年交有优惠吗
  • 总分类一般采用什么格式
  • 刚成立公司没有报表怎么解释
  • 劳务报酬所得是什么
  • 银行汇票转给第三方怎么操作
  • 物业公司临时工的工资可以进成本吗
  • 长期借款利息计入在建工程
  • 注册个人独资企业和有限公司哪个好
  • 教育费附加是用来干嘛的
  • 地税保险单位编号是什么
  • 公司如何向税务部门举报
  • 个税申报与社保申报一定是一致的么
  • 普通发票汇总上传
  • 购买汽车车辆购置税个人垫付,企业付给个人的附件归属
  • 第三方贴现分录
  • 应交税费待抵扣进项税额是什么科目
  • 视同销售行为怎么进行财税处理?
  • 公司注销的时候注册资金都没交可以吗?
  • 联营 保底
  • 在王者荣耀中怎么找个妹子
  • 新版edge浏览器兼容ie
  • 土地无形资产怎么估值
  • 如何开启windows10云服务
  • 货币资金资产处置损益表如何填
  • windows 11预览版
  • 存货包括生产成本,在资产负债表中表示
  • macbook air怎么点击
  • 转出固定资产账务处理
  • 未签订销售合同
  • 新成立公司实收资本没到位该怎么做账
  • re.findall()用法
  • vue项目如何启动运行
  • 会计上弥补亏损
  • 供应商退款需要冲库存商品吗
  • 营业执照增加经营范围要钱吗
  • 2021新旧会计准则的比较分析
  • 企业资产评估增值
  • 无法在common files上设置新的所有者
  • 主营业务成本和营业成本的区别
  • 个人经营所得税怎么申报
  • 员工垫付费用怎么做账
  • 免费赠送客户入群的文案
  • 收到对方的银行汇票算什么凭证
  • 会计处理是会计分录吗
  • 商品流通企业如何控成本
  • sqlserver日志恢复数据
  • windows 2003 iis+php5+mysql+phpmyadmin 详细安装配置
  • win10 win7兼容模式
  • win7安装软件出现乱码
  • windowsxp关闭窗口操作方法有哪些
  • win8系统如何打开摄像头
  • w8系统怎么连接投影仪
  • 一开机弹出个微软重新设定
  • centos 安装perl
  • win10重置系统快捷键
  • 如何解决windows副本不是正版
  • linux系统安装程序
  • es6class类用法
  • 单线程语言有哪些
  • nodejs调用go
  • 批处理删除空文件夹
  • 网关绑定失败怎么设置
  • linux c语言获取当前路径
  • js中的require用法
  • node中的ejs
  • jquery获取动态生成的元素的值
  • 上海各区税务大厅
  • 支付水电费的增值税税率文件
  • 工会代扣代缴个税怎么申报
  • 包装物押金的计算
  • 中医药文化进校园活动
  • 各种税费申报日期
  • 计生法废止
  • 公司以融资租赁形式从事非法放贷业务,,能否让法院判
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设