axios

Posted hello word

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了axios相关的知识,希望对你有一定的参考价值。

axios的基本特性

axios 是一个基于Promise用于浏览器和node.js 的http客户端

它具有以下特征:

+ 支持浏览器和node.js

+ 支持Promise

+ 能拦截请求和相应

+ 自动转换JSON数据

代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8   <title>Document</title>
 9   <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
10 </head>
11 
12 <body>
13 
14 </body>
15 <script>
16   // get
17   // restful 形式
18   axios.get(‘http://localhost:3000/test3/12313‘)
19     .then(res => console.log(res.data))
20   // 传统形式
21   axios.get(‘http://localhost:3000/test3?name=zhangsan&id=2313123‘)
22     .then(res => console.log(res.data))
23   // params 形式
24   axios.get(‘http://localhost:3000/test3‘,{
25     params:{
26       name:‘zhangsan‘,
27       id:‘234242‘
28     }
29   })
30     .then(res => console.log(res.data))
31 
32 </script>
33 
34 </html>

 

 

axios 的响应结果:

data: 实际响应回来的数据

headers: 响应头信息

status: 响应状态码

statusText:响应状态信息


 

 

axios 的全局配置:

 超时时间:

axios.defaults.timeout = 3000

默认地址:

axios.defaults.baseURL = ‘http://localhost:3000/app‘ 

设置请求头:

axios.defaults.headers[‘token‘] = ‘32fsd98u23fsdfsi23r‘

 

请求拦截器

axios.interceptors.request.use(function (config){

  // 在发出请求前进行以下信息设置

  return config

})

 

 

 

 

以上是关于axios的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段14——Vue的axios网络请求封装

ajax与 axios的基础讲解(附代码及接口)

项目集成element-plus和axios

回归 | js实用代码片段的封装与总结(持续更新中...)

执行带有axios的GET请求时出现401错误

前端面试题之手写promise