axios框架里面如何使用get,post,通用ajax方法请求。

回到文章总目录
本篇文章介绍的内容为axios框架里面如何使用get，post，通用ajax方法请求。
axios是目前前端ajax中最热门的工具库，是vue和react官方推荐的ajax工具包
作用：
1.可以在node.js里面发送请求
2.支持Promise API （es6新推出的异步编程的解决方案）
3.拦截器机制
4.数据转换
5.取消请求
6.自动转化为json
7.安全相关的防护

归根结底还是用来发送ajax请求的

我们不在npm里面安装了，直接使用cdn链接（直接把链接放到htnl里面）
1.未压缩，可以方便理解版本

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>

2.压缩版

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>

GET请求 1路由 2其他设置
axios.get(url[, config])
POST请求 1路由 2 参数(请求体) 3其他设置
axios.post(url[, data[, config]])

注意一
post请求方法的请求体将会被转换未json格式字符串传递过去

详细解释在案例代码里面

案例代码

1.创建在testseleven文件夹并在这个文件夹里面
2.创建simpel.html文件
3.创建server.js文件

simpel.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 存放Axios链接  --><!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> --><!-- 添加允许跨源属性获取链接  向该链接发送请求的时候不会发送当前域名下的cookies  一般当前域名的cookies存放着你的帐号密码--><script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script><title>Axios发送ajax请求</title>
</head>
<body><button style="background-color: tomato;">GET</button><button style="background-color: tomato;">POST</button><button style="background-color: violet;">通用Ajax</button><div id="result" style="width: 180px;height: 100px;border: solid 2px teal;"></div><script>// 把所有的按钮标签都选择const btns = document.querySelectorAll('button');// 配置 baseURLaxios.defaults.baseURL = 'http://127.0.0.1:8000';// 第一个按钮btns[0].onclick = function(){// GET请求axios.get('/axiosget', {// url 参数params: {id: 100,name: 999},// 请求头信息headers:{sex: 'boy',age: 999}// axios数据返回和处理和jquery不一样，// jquery使用的是回调函数// axios使用的是基于Promise   .then(value => {};) 箭头函数}).then(value =>{console.log(value);})}// 第二个按钮btns[1].onclick = function(){// POST请求   axios.post('1.路由',{2.参数-请求体},{3.其他设置})// 2.参数-请求体  将会被转换未json格式字符串传递过去axios.post('/axiospost',{username:'dayo',password:'dayo'},{// url参数params: {id: 999,vip: 999},// 请求头参数headers:{height:999,weight:999}// 打印返回来的数据}).then(value =>{console.log(value);})}// 第三个按钮btns[2].onclick =function(){axios({// 请求方法method: 'POST',// urlurl: '/axios-server',// url参数params: {vip: 999,level: 999},// 请求头信息headers: {a: 999,b: 999},// 请求体信息data: {username: 'dayo',password: 'dayo'}// 打印响应的所有信息}).then(response=>{console.log(response);// 另外打印响应状态码console.log(response.status);// 响应状态字符串console.log(response.statusText);// 响应头信息console.log(response.headers);// 响应体 console.log('响应体:',response.data);})}</script>
</body></html>

server.js文件

// 1. 引入express
const express = require('express');// 2.创建对象
const app = express();
// 3.创建路由规则  里面的形参 request与response   (自己可以随便定义名字的)
//  建议写成  request与response  因为可以见名思意，方便自己看
// request  对请求报文的封装
// responst 对响应报文的封装
//  请求路径为'/server'// 当使用post请求时候会因为发送的信息没有收到对应的结果所以回报错
// 所以该处使用all  表示可以接收任意类型的请求      如get post 等等// 一：get请求
app.all('/axiosget', (request, response)=>{response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');response.send('get请求成功，服务端非json数据返回，返回的是字符串格式.');
});
// 二 ：post请求json数据
app.all('/axiospost', (request, response)=>{// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');// 响应头        *号表示所有的头信息都可以接收response.setHeader('Access-Control-Allow-Headers','*');// 响应一个数据   把这个对象返回给浏览器const data = {name: 'post请求，服务端设置了json格式返回 '};// 对对象进行字符串转换let str = JSON.stringify(data);setTimeout(()=>{response.send(str);},200);
});
// 三：axios通用ajax请求 json数据
app.all('/axios-server', (request, response)=>{response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');const data = {name: 'axios通用ajax请求的post请求方法，服务端设置了json格式返回'};let str = JSON.stringify(data);setTimeout(()=>{response.send(str);},200);
});// 4. 监听端口启动服务
// 这里listen(8000)后面添加了一个回调，用来提示，告诉自己是否监听成功
app.listen(8000, ()=>{console.log("服务已经启动，8000端口监听中......");
});

axios框架里面如何使用get,post,通用ajax方法请求。相关推荐

Vue框架+Axios框架
Vue框架 Vue概念 Vue (读音 /vjuː/,类似于 view) 是一套用于**构建用户界面**的渐进式JavaScript框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. ...
axios 框架的介绍和基本使用
1.axios 是个啥? 直白点说,比如在开发前端应用程序的过程中需要用到的一些文字.图片等资源,ta门一般会被提前放到服务器上,这样的话就要向服务器发送网络请求获取这些资源,然后才能在应用程序上对其 ...
图神经网络（三）GCN的变体与框架（4）GNN的通用框架
图神经网络(三)GCN的变体与框架(4)GNN的通用框架 3.4 GNN的通用框架 3.4.1 MPNN 3.4.2 NLNN 1.内积 2.全连接 3.高斯函数 3.4.3 GN 参考文献 3.4 ...
DL框架之Tensorflow：深度学习框架Tensorflow的简介、安装、使用方法之详细攻略
DL框架之Tensorflow:深度学习框架Tensorflow的简介.安装.使用方法之详细攻略目录 Tensorflow的简介 1.描述 2.TensorFlow的六大特征 3.了解Tensorf ...
学习 axios 源码整体架构，打造属于自己的请求库
前言这是学习源码整体架构系列第六篇.整体架构这词语好像有点大,姑且就算是源码整体结构吧,主要就是学习是代码整体结构,不深究其他不是主线的具体函数的实现.本篇文章学习的是实际仓库的代码. 学习源码整体 ...
编写高质量代码：改善Java程序的151个建议 (第1章　Java开发中通用的方法和准则)
第1章 Java开发中通用的方法和准则 The reasonable man adapts himself to the world;the unreasonable one persists in ...
Effective Java：对于全部对象都通用的方法
前言: 读这本书第1条规则的时候就感觉到这是一本非常好的书.可以把我们的Java功底提升一个档次,我还是比較推荐的.这里我主要就关于覆盖equals.hashCode和toString方法来做一个笔记 ...
DL框架之PyTorch：深度学习框架PyTorch的简介、安装、使用方法之详细攻略
DL框架之PyTorch:PyTorch的简介.安装.使用方法之详细攻略 DL框架之PyTorch:深度学习框架PyTorch的简介.安装.使用方法之详细攻略目录 PyTorch的简介 1.pyto ...
DL框架之darknet：深度学习框架darknet的简介、安装、使用方法的详细攻略
DL框架之darknet:深度学习框架darknet的简介.安装.使用方法的详细攻略目录 darknet的简介 darknet的安装 darknet的使用方法 1.YOLO: Real-Time O ...

axios框架里面如何使用get,post,通用ajax方法请求。

案例代码

axios框架里面如何使用get,post,通用ajax方法请求。相关推荐

最新文章

热门文章