Axios使用方式

ajax是JQUERY封装的XMLHttprequest用来发送http请求

Axios简单点说它就是一个js库,支持ajax请求,发送axios请求功能更加丰富,丰富在哪不知道

1.npm使用方式

vue项目中 npm install axios

2.cdn方式

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

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

3.使用本地文件

<script src="js/axios.min.js"></script>

axios 带有拦截器功能:分别是请求拦截器 应答拦截器(就是响应拦截器)

第三种方式需要将axios文件下载到本地,下载方式

GITHUB上下载 地址 GitHub - axios/axios: Promise based HTTP client for the browser and node.js

在 GitHub 仓库页面,点击 "Code" 按钮,然后选择 "Download ZIP" 以下载包含所有文件的压缩文件。

解压下载的 ZIP 文件。

在解压后的文件夹中,你可以在 dist 文件夹中找到 axios.min.js 文件。

解压后点进去dist 文件夹中找到 axios.min.js 文件。

下面用VsCode练习下axios

1.GET无参

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<!-- 引入axios -->

<script src="js/axios.min.js"></script>

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

<!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->

</head>

<body>

<button οnclick="fn1()">使用axios发送get请求,无参数</button>

<script>

//get无参请求 axios格式: axios.get(url).then().catch().finally()

function fn1(){

var url="http://localhost:8000/api/v1/product/index";

axios.get(url).then(res=>{

console.log(res)

}).catch(err=>{

console.log(err)

}).finally(()=>{

console.log("一定执行的代码")

})

}

</script>

</body>

</html>

这是因为跨域问题

2.GET请求带参数

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<!-- 引入axios -->

<script src="js/axios.min.js"></script>

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

<!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->

</head>

<body>

<button οnclick="fn1()">使用axios发送get请求,无参数</button>

<button οnclick="fn2()">使用axios发送get请求,带参数</button>

<script>

//get无参请求 axios格式: axios.get(url).then().catch().finally()

function fn1(){

var url="http://localhost:8000/api/v1/product/list";

axios.get(url).then(res=>{

console.log(res)

}).catch(err=>{

console.log(err)

}).finally(()=>{

console.log("一定执行的代码")

})

}

function fn2(){

var pType=1;

var pageNum=1;

var pageSize=3;

var url="http://localhost:8000/api/v1/product/list?pType="+pType+"\&pageNum="+pageNum+"\&pageSize="+pageSize;

axios.get(url).then(res=>{

console.log(res)

}).catch(err=>{

console.log(err)

}).finally(()=>{

console.log("一定执行的代码")

})

}

</script>

</body>

</html>

上面这样是传统传参方式

axios使用配置项目params

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<!-- 引入axios -->

<script src="js/axios.min.js"></script>

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

<!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->

</head>

<body>

<button οnclick="fn1()">使用axios发送get请求,无参数</button>

<button οnclick="fn2()">使用axios发送get请求,带参数</button>

<button οnclick="fn3()">使用axios发送get请求,带参数,使用axios配置项方式</button>

<script>

//get无参请求 axios格式: axios.get(url).then().catch().finally()

function fn1(){

var url="http://localhost:8000/api/v1/product/list";

axios.get(url).then(res=>{

console.log(res)

}).catch(err=>{

console.log(err)

}).finally(()=>{

console.log("一定执行的代码")

})

}

function fn2(){

var pType=1;

var pageNum=1;

var pageSize=3;

var url="http://localhost:8000/api/v1/product/list?pType="+pType+"\&pageNum="+pageNum+"\&pageSize="+pageSize;

axios.get(url).then(res=>{

console.log(res)

}).catch(err=>{

console.log(err)

}).finally(()=>{

console.log("一定执行的代码")

})

}

function fn3(){

var pType=1;

var pageNum=1;

var pageSize=3;

var url="http://localhost:8000/api/v1/product/list";

axios.get(url,{

params:{

pType:pType,

pageNum:pageNum,

pageSize:pageSize

}

}).then(res=>{

console.log(res)

}).catch(err=>{

console.log(err)

}).finally(()=>{

console.log("一定执行的代码")

})

}

</script>

</body>

</html>

params是一个{}对象

那么也可以

var data={

xxx:xxx

yyy:yyy

}

然后里面

params:data 即可

例如

Axios发送POST请求

后端接收可以是单个接收 也可以是实体类

用AXIOS发送Post请求 application/json

后端接收

这个请求会发送预请求 实际上是两个请求

预请求

AXIOS也可以像ajax那样配置项的方式发送请求

下面两种方式使用POST PUT PATCH

这种方式默认Content-Type是application/json

AXIOS的返回值

AXIOS的拦截器

拦截器分两种,分别是

请求拦截器:在发起请求之前执行,可以对请求内容做修改,比如增加参数,设置请求头等等

应答拦截器(相应拦截器):服务器返回结果,AXIOS的then之前先执行,可以对应答内容做处理

请求拦截器写法

axios.interceptors.request.use(function(xxx){ 记得return xxx},function(yyy) {如果错误做错误处理});

响应拦截器

AXIOS进行全局默认配置

相关推荐
Mac Zhu6 天前
okhttp断点续传
okhttp·断点续传
Hacker_Fuchen6 天前
CSRF攻击&XSS攻击
安全·web安全·okhttp·xss·csrf
无限大.10 天前
理解AJAX与Axios:异步编程的世界
前端·ajax·okhttp
qq_2975046110 天前
【解决】okhttp的java.lang.IllegalStateException: closed错误
java·开发语言·okhttp
TroubleMaker12 天前
OkHttp源码学习之CertificatePinner
android·java·okhttp
TroubleMaker13 天前
OkHttp源码学习之Authenticator
android·java·okhttp
猛踹瘸子那条好腿(职场发疯版)13 天前
Vue.js Ajax(vue-resource)
vue.js·ajax·okhttp
孑么14 天前
GDPU Android移动应用 重点习题集
android·xml·java·okhttp·kotlin·android studio·webview
前端青山15 天前
使用XMLHttpRequest进行AJAX请求的详解
前端·javascript·ajax·okhttp·前端框架
摇光9315 天前
js适配器模式
android·okhttp·适配器模式