【Vue】2-8、Axios 网络请求

cdn:<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 

注:使用 CDN 链接就可以不需要去下载对应的 js 文件到本地,只需要联网即可使用,可以减少项目的体积  

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Axios</title>
</head>
<body><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>const result = axios({method: 'GET',url: 'http://www.liulongbin.top:3006/api/getbooks'})then(function(books){console.log(books)})</script>
</body>
</html>
<body><button id="btnGet">get</button><button id="btnPost">post</button><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>document.querySelector('#btnGet').addEventListener('click',async function(){const { data:res} = await axios.get('http://www.liulongbin.top:3006/api/getbooks',{params: {id: 1}})console.log(res)})document.querySelector('#btnPost').addEventListener('click',async function(){const { data:res} = await axios.post('http://www.liulongbin.top:3006/api/post',{name: 'zs',gender: '女'})console.log(res)})</script>
</body>

import axios from 'axios'// Vue.prototype.axios = axios
Vue.prototype.$http = axios

 如果每次使用都要导入一次,那就太麻烦了,也降低了可维护性

可以在 main.js 文件中导入 axios ,这样就不需要在每个组件中都重新导入了   

methods: {async postInfo() {const { data: res } = await this.$http.post('http://www.liulongbin.top:3006/api/post', { name: 'zs', age: 20 })console.log(res)}
}
// 全局配置 axios 的请求跟路径
axios.defaults.baseURL = 'http://www.liulongbin.top:3006'

 缺点:不利于 API 的复用!

一  叶  知  秋,奥  妙  玄  心 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/659430.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【51单片机系列】中断优先级介绍及使用

文章来源&#xff1a;《51单片机原理及应用&#xff08;第3版&#xff09;》5.4节。 51单片机采用了自然优先级和人工设置高、低优先级的策略。 当CPU处理低优先级中断&#xff0c;又发生更高级中断时&#xff0c;此时中断处理过程如下图所示。 一个正在执行的低优先级中断服…

刷存在感,Excel转Protobuf/Json通用配置文件

使用场景 最近工作流中有将Excel转Protobuf作为配置文件的技术方案。具体实现是先定一个proto文件&#xff0c;再在一个对应excel表中定义对应字段&#xff0c;由策划在excel进行更改。proto文件可以生成对应语言的脚本&#xff0c;然后将excel转成对应protobuf的binary。 我…

Leetcode第382场周赛

Leetcode第382场周赛 本人水平有限&#xff0c;只做前三道。 一、按键变更的次数 给你一个下标从 0 开始的字符串 s &#xff0c;该字符串由用户输入。按键变更的定义是&#xff1a;使用与上次使用的按键不同的键。例如 s “ab” 表示按键变更一次&#xff0c;而 s “bBBb”…

Codeforces Round 922 (Div. 2 ABCDEF题)

A. Brick Wall Problem Statement A brick is a strip of size 1 k 1 \times k 1k, placed horizontally or vertically, where k k k can be an arbitrary number that is at least 2 2 2 ( k ≥ 2 k \ge 2 k≥2). A brick wall of size n m n \times m nm is such a…

Pandas进阶--map映射,分组聚合和透视pivot_table详解

文章目录 1.Pandas的map映射&#xff08;1&#xff09;映射&#xff08;2&#xff09;map充当运算工具 2.数据分组和透视&#xff08;1&#xff09;分组统计 - groupby功能 是pandas最重要的功能&#xff08;2&#xff09;聚合agg 3.透视表pivot_table&#xff08;1&#xff09…

小程序上的h5页面在web上面访问 页面基于vue

前提&#xff1a;BASE_URL: https://ded.toll.keeke.ai/ded-api/ 页面路径是&#xff1a;pages/webview/webview 参数是&#xff1a;id111 列表页跳转到详情页的方法是 toDetail(e) {wx.navigateTo({url: ../webview/webview?id e.currentTarget.dataset.oid})}, vue的映射…

【日常问题】Failed to enable unit: Unit file docker.service does not exist.

Failed to enable unit: Unit file docker.service does not exist. 1. 问题原因 笔者问题的产生是因为在ubuntu20.04下采用snapd安装的docker&#xff0c;因此 systemctl restart docker.servicesystemd并不能找到守护进程docker.service 同时使用docker命令时还会产生若干…

React Router 完美教程(上)

概述 什么叫路由呢&#xff0c;说白了就是如何处理页面的跳转。在传统的网站中&#xff0c;我们都是向服务器请求页面及相应的css和js代码。自从前后端分离的相思提出后&#xff0c;一堆基于js虚拟Dom的框架应运而生。React就是其中优秀的代表作之一。这种方式极大的优化了开发…

Conventional SortSearch

Merge Sort——from bottom to top(iteration) void merge_sort( ElementType list[], ElementType sorted[], int N, int length ){int size1;for(;size<N;size*2){for(int i0;i<N;i2*size){int l1i; int l2sizei;int locl1;while(l1<isize&&l1<N&…

etcd自动化安装配置教程

文章目录 前言一、简介1. 简介2. 特点3. 端口介绍 二、etcd安装教程&#xff08;单机版&#xff09;1. 复制脚本2. 增加执行权限3. 执行脚本4. 查看启动状态5. 卸载etcd 三、etcd安装教程&#xff08;集群版&#xff09;1. 复制脚本2. 增加执行权限3. 分发脚本4. 执行脚本5. 启…

中科大计网学习记录笔记(一):Internet | 网络边缘

计算机网络 前言&#xff1a; 学习视频&#xff1a;中科大郑烇、杨坚全套《计算机网络&#xff08;自顶向下方法 第7版&#xff0c;James F.Kurose&#xff0c;Keith W.Ross&#xff09;》课程 该视频是B站非常著名的计网学习视频&#xff0c;但相信很多朋友和我一样在听完前面…

【JavaSE篇】——内部类

目录 &#x1f393;内部类 &#x1f388;内部类的分类 &#x1f6a9;实例内部类 一.如何实例内部类对象 二.实例内部类中为什么不能有静态成员变量 &#xff08;用final解决&#xff09; 三.在实例内部类对象时&#xff0c;如何访问外部类当中相同的成员变量&#xff1f;…

SpringMVC-基本概念

一、引子 我们在上篇文章Spring集成Web中抛出了一个问题&#xff1a;为什么我们一直在自用Java Web阶段使用的Servlet来承接客户端浏览器的请求呢&#xff0c;我们熟知甚至是已经在日常开发中经常使用的Controller又与之有什么关系呢&#xff1f;我们将在本篇文章解答读者的这…

检测CUDA 是否能访问GPU时回应速度慢【笔记】

SUPWEMICRO 418G-Q20X12 维护记录&#xff1a; 两台设备均已安装CUDA与Pytorch&#xff0c;在检测CUDA 是否能访问GPU&#xff0c;执行torch.cuda.is_available()命令时&#xff0c;一台设备速度秒回应True&#xff0c;但另外一台设备回应速度慢&#xff08;1分钟左右&#xff…

node,node-sass,sass-loader之间的版本关系

前言 安装配置node-sass 以及 sass-loader想必是很多前端的噩梦–一不小心又不成功还得装个半天。 下面说一下这个问题。 当然&#xff0c;你肯定遇到过&#xff1a; Node Sass version 9.0.0 is incompatible with ^4.0.0-这样的问题&#xff0c;这个也是因为三者关系对不上…

【PyQt】02-基本UI

文章目录 前言一、首先了解什么是GUI&#xff1f;二、初学程序1.界面展示代码运行结果 2.控件2.1按钮展示代码运行结果 2.2 纯文本和输入框代码运行结果 3、重新设置大小 -resize4、移动窗口-move()5、设置界面在电脑中央5.1 代码运行结果 6、设置窗口图标代码运行结果 7、布局…

Django模型(二)

一、更新数据库表结构 不管是新增模型,还是修改已有模型后,只需要执行行命令即可: 1.1、创建迁移 在项目根目录的cmd中运行: $ python manage.py makemigrations model_app备注 model_app是子应用的名称,如果不指定,那么就是对所有 INSTALLED_APPS 中的应用都进行预备…

开发数据产品+AI产品通关上岸课程

该课程全面解析数据产品和人工智能产品的开发与设计。学员将学习产品规划、数据分析以及AI技术应用&#xff0c;通过案例实践掌握产品开发流程&#xff0c;致力于帮助他们成功进入数据和人工智能产品领域。 课程大小&#xff1a;9.8G 课程下载&#xff1a;https://download.cs…

Java多线程共享变量控制volatile

1. volatile实现可见性&#xff08;jdk 1.5后&#xff09; 1. 可见性 如果一个线程对共享变量值的修改&#xff0c;能够及时的被其他线程看到&#xff0c;叫做共享变量的可见性。如果一个变量同时在多个线程的工作内存中存在副本&#xff0c;那么这个变量就叫共享变量 volati…

如何从零开始开发一个PS5浏览器 | How to develop a PS5 browser

环境&#xff1a;Windows PS5一台 问题&#xff1a;PS5折腾需要使用PKG浏览器访问特定网址&#xff0c;如何自定义网址呢&#xff1f; 解决办法&#xff1a;使用开发套件PS Multi Tools开发一个空应用&#xff0c;利于deeplinkUri 参数访问网页 背景&#xff1a;PS5折腾后&…