axios(ajax请求库)

news/2024/10/18 6:08:49/

json-server(搭建http服务)

json-server用来快速搭建模拟的REST API的工具包

使用json-server

  • 下载：npm install -g json-server
  • 创建数据库json文件：db.json
  • 开启服务：json-srver --watch db.json

axios的基本使用

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>axios基本使用</title><link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body><div class="container"><h2 class="page-header">基本使用</h2><button class="btn btn-primary"> 发送GET请求 </button><button class="btn btn-warning" > 发送POST请求 </button><button class="btn btn-success"> 发送 PUT 请求 </button><button class="btn btn-danger"> 发送 DELETE 请求 </button></div><script>//获取按钮const btns = document.querySelectorAll('button');//第一个btns[0].onclick = function(){//发送 AJAX 请求axios({//请求类型method: 'GET',//URLurl: 'http://localhost:3000/posts/2',}).then(response => {console.log(response);});}//添加一篇新的文章btns[1].onclick = function(){//发送 AJAX 请求axios({//请求类型method: 'POST',//URLurl: 'http://localhost:3000/posts',//设置请求体data: {title: "今天天气不错, 还挺风和日丽的",author: "张三"}}).then(response => {console.log(response);});}//更新数据btns[2].onclick = function(){//发送 AJAX 请求axios({//请求类型method: 'PUT',//URLurl: 'http://localhost:3000/posts/3',//设置请求体data: {title: "今天天气不错, 还挺风和日丽的",author: "李四"}}).then(response => {console.log(response);});}//删除数据btns[3].onclick = function(){//发送 AJAX 请求axios({//请求类型method: 'delete',//URLurl: 'http://localhost:3000/posts/3',}).then(response => {console.log(response);});}</script>
</body></html>

axios的其他使用

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>axios其他使用</title><link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body><div class="container"><h2 class="page-header">其他使用</h2><button class="btn btn-primary"> 发送GET请求 </button><button class="btn btn-warning" > 发送POST请求 </button><button class="btn btn-success"> 发送 PUT 请求 </button><button class="btn btn-danger"> 发送 DELETE 请求 </button></div><script>//获取按钮const btns = document.querySelectorAll('button');//发送 GET 请求btns[0].onclick = function(){// axios()axios.request({method:'GET',url: 'http://localhost:3000/comments'}).then(response => {console.log(response);})}//发送 POST 请求btns[1].onclick = function(){// axios()axios.post('http://localhost:3000/comments', {"body": "喜大普奔","postId": 2}).then(response => {console.log(response);})}/*** axios({*      url: '/post',*      //  /post?a=100&b=200*      //  /post/a/100/b/200*      //  /post/a.100/b.200*      params: {*          a:100,*          b:200*      }* })* * *  */</script>
</body></html>

axios的默认配置

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>axios基本使用</title><link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body><div class="container"><h2 class="page-header">基本使用</h2><button class="btn btn-primary"> 发送GET请求 </button><button class="btn btn-warning" > 发送POST请求 </button><button class="btn btn-success"> 发送 PUT 请求 </button><button class="btn btn-danger"> 发送 DELETE 请求 </button></div><script>//获取按钮const btns = document.querySelectorAll('button');//默认配置axios.defaults.method = 'GET';//设置默认的请求类型为 GETaxios.defaults.baseURL = 'http://localhost:3000';//设置基础 URLaxios.defaults.params = {id:100};axios.defaults.timeout = 3000;//3秒之后结果如果还没有回来就取消请求btns[0].onclick = function(){axios({url: '/posts'}).then(response => {console.log(response);})}</script>
</body></html>

axios创建实例对象

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>axios实例对象对象</title><link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body><div class="container"><h2 class="page-header">基本使用</h2><button class="btn btn-primary"> 发送GET请求 </button><button class="btn btn-warning" > 发送POST请求 </button><br></div><script>//获取按钮const btns = document.querySelectorAll('button');//创建实例对象  /getJokeconst duanzi = axios.create({baseURL: 'https://api.apiopen.top',timeout: 2000});const another = axios.create({baseURL: 'https://b.com',timeout: 2000});//这里  duanzi 与 axios 对象的功能几近是一样的// duanzi({//     url: '/getJoke',// }).then(response => {//     console.log(response);// });duanzi.get('/getJoke').then(response => {console.log(response.data)})</script>
</body></html>

拦截器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>拦截器</title><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body><script>// Promise// 设置请求拦截器  config 配置对象axios.interceptors.request.use(function (config) {console.log('请求拦截器 成功 - 1号');//修改 config 中的参数config.params = {a:100};return config;}, function (error) {console.log('请求拦截器 失败 - 1号');return Promise.reject(error);});axios.interceptors.request.use(function (config) {console.log('请求拦截器 成功 - 2号');//修改 config 中的参数config.timeout = 2000;return config;}, function (error) {console.log('请求拦截器 失败 - 2号');return Promise.reject(error);});// 设置响应拦截器axios.interceptors.response.use(function (response) {console.log('响应拦截器 成功 1号');return response.data;// return response;}, function (error) {console.log('响应拦截器 失败 1号')return Promise.reject(error);});axios.interceptors.response.use(function (response) {console.log('响应拦截器 成功 2号')return response;}, function (error) {console.log('响应拦截器 失败 2号')return Promise.reject(error);});//发送请求axios({method: 'GET',url: 'http://localhost:3000/posts'}).then(response => {console.log('自定义回调处理成功的结果');console.log(response);});</script>   
</body>
</html>

请求取消

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>取消请求</title><link crossorigin='anonymous' href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body><div class="container"><h2 class="page-header">axios取消请求</h2><button class="btn btn-primary"> 发送请求 </button><button class="btn btn-warning" > 取消请求 </button></div><script>//获取按钮const btns = document.querySelectorAll('button');//2.声明全局变量let cancel = null;//发送请求btns[0].onclick = function(){//检测上一次的请求是否已经完成if(cancel !== null){//取消上一次的请求cancel();}axios({method: 'GET',url: 'http://localhost:3000/posts',//1. 添加配置对象的属性cancelToken: new axios.CancelToken(function(c){//3. 将 c 的值赋值给 cancelcancel = c;})}).then(response => {console.log(response);//将 cancel 的值初始化cancel = null;})}//绑定第二个事件取消请求btns[1].onclick = function(){cancel();}</script>   
</body>
</html>


http://www.ppmy.cn/news/1476855.html

相关文章

健康问题查询找搜索引擎还是大模型

健康问题查询找搜索引擎还是大模型

随着自然语言处理&#xff08;NLP&#xff09;的最新进展&#xff0c;大型语言模型&#xff08;LLMs&#xff09;已经成为众多信息获取任务中的主要参与者。然而&#xff0c;传统网络搜索引擎&#xff08;SEs&#xff09;在回答用户提交的查询中的作用远未被取代。例如&#xf…
阅读更多...
JavaWeb入门程序解析（Spring官方骨架、配置起步依赖、SpringBoot父工程、内嵌Tomcat）

JavaWeb入门程序解析（Spring官方骨架、配置起步依赖、SpringBoot父工程、内嵌Tomcat）

3.3 入门程序解析 关于web开发的基础知识&#xff0c;我们可以告一段落了。下面呢&#xff0c;我们在基于今天的核心技术点SpringBoot快速入门案例进行分析。 3.3.1 Spring官方骨架 之前我们创建的SpringBoot入门案例&#xff0c;是基于Spring官方提供的骨架实现的。 Sprin…
阅读更多...
3、PostgreSQL之高级特性

3、PostgreSQL之高级特性

PostgreSQL之高级特性 1、视图 之前我们查询过城市的天气情况&#xff0c;假设天气记录和城市位置的组合列表对我们的应用有用&#xff0c;但我们又不想每次需要使用它时都敲入整个查询。我们可以在该查询上创建一个视图&#xff0c;这会给该查询一个名字&#xff0c;我们可以…
阅读更多...
【LeetCode】80.删除有序数组中的重复项II

【LeetCode】80.删除有序数组中的重复项II

1. 题目 2. 分析 3. 代码 class Solution:def removeDuplicates(self, nums: List[int]) -> int:if len(nums) < 3:return len(nums)i 0j 1k 2while(k < len(nums)):if (nums[i] nums[j]):while(k < len(nums) and nums[j] nums[k] ):k1if (k < len(nums…
阅读更多...
Vue的依赖注入：组件树中的共享数据与功能

Vue的依赖注入：组件树中的共享数据与功能

引言 在构建大型前端应用时，组件间的通信和状态共享是一个常见问题。Vue.js 提供了一种类似于 React 的 Context 机制的依赖注入系统，允许开发者在组件树中共享数据和功能。provide 和 inject 是 Vue 依赖注入的两个关键概念。本文将深入探讨 Vue 的依赖注入机制，讨论如何使…
阅读更多...
Hadoop基础组件介绍！

Hadoop基础组件介绍！

Hadoop是一个由Apache基金会所开发的分布式系统基础架构&#xff0c;Hadoop生态系统已经远远超出了这些基本组件&#xff0c;现在包括了多种组件和技术&#xff0c;详情介绍如下&#xff1a; HDFS&#xff08;Hadoop Distributed File System&#xff09; HDFS是Hadoop的核心组…
阅读更多...
git使用、git与idea结合、gitee、gitlab

git使用、git与idea结合、gitee、gitlab

本文章基于黑马程序javase模块中的"git"部分 先言:git在集成idea中,不同版本的idea中页面显示不同,操作时更注重基于选项的文字;git基于命令操作参考文档实现即可,idea工具继承使用重点掌握 1.git概述 git是目前世界上最先进的分布式文件版本控制系统 分布式:将…
阅读更多...
戴尔电脑开机出现no boot device found错误提示原因分析及解决方法

戴尔电脑开机出现no boot device found错误提示原因分析及解决方法

戴尔电脑是一款不的品牌,戴尔电脑一直以来都是以IT直销享誉全球的。而旗下的戴尔笔记本&#xff0c;更是深受用户们的追捧和喜爱。最近有网友反馈戴尔电脑开机出现no boot device found错误提示是怎么回事&#xff1f;后来发现有很多网友将引导模式改成legacymbr后发现启动时出…
阅读更多...
最新文章

Copyright @ 2022~2023