一、介绍
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
可以提供以下服务:
1、从浏览器中创建XMLHttpRequests
2、从node.js创建http请求
3、支持PromiseAPI
4、拦截请求和响应
5、转换请求数据和响应数据
6、取消请求
7、自动转换JSON数据
8、客户端支持防御XSRF
二:使用
1、axios的安装:
安装命令; npm install axios
2、axios五种请求:
1⃣️get: 一般多用于获取数据
![复制代码](https://i-blog.csdnimg.cn/blog_migrate/9fafc5631ba1215db74dcb775c5144aa.png)
不带参数
方式一: axios({ methods: 'get', url: '/ulr' })
方式二: axios.get('/url')
1 2 3 4 5 6 7 8 9 | 带参数 方式一: axios.get( '/url' , {params: {id: 12}}) //请求的地址实际为 localhost:8080/url?id=12 方式二: axios({ methods: 'get' , url: 'url' , params: { id:12 } }) |
![复制代码](https://i-blog.csdnimg.cn/blog_migrate/9fafc5631ba1215db74dcb775c5144aa.png)
2⃣️post: 主要提交表单数据和上传文件
1 2 3 4 5 6 7 8 9 10 | let data = {} let config = {} 方式一: axios.post( '/url' ,data,config) 方式二: axios({ methods: 'post' , url: '/url' , data: data, config: config })<br data-filtered= "filtered" > 其中 data可以有两种格式form-data(图片上传,文件上传) applicition/json(目前比较流行)<br data-filtered= "filtered" > 上面两种方法 都是 appliction/json格式<br data-filtered= "filtered" > 如下为: form-data<br data-filtered= "filtered" > let formData = new FormData()<br data-filtered= "filtered" > let data = {<br data-filtered= "filtered" > id: 12<br data-filtered= "filtered" > }<br data-filtered= "filtered" > for ( let key in data) {<br data-filtered= "filtered" > formData.append(key, data[key]) //床架form-data格式数据<br data-filtered="filtered"> }<br data-filtered="filtered"> axios({<br data-filtered="filtered"> methods: 'post',<br data-filtered="filtered"> url: '/url',<br data-filtered="filtered"> data: formData<br data-filtered="filtered"> })<br data-filtered="filtered"> 该请求发出之后可以在浏览器中查看此次请求的request header里面content-type: 为 form-data形式<br data-filtered="filtered"> |
3⃣️put对数据全部进行更新
该请求和post类似,只是请求方法不同
4⃣️patch只对更改过的数据进行更新
该请求和post类似,只是请求方法不同
5⃣️delete删除请求(参数可以放在url上也可以和post一样放在请求体中)
axios.delete('/url', {params: {id: 12}}) 参数在url params很重要
axios.delete('/url', {data: {id: 12}}) 参数在请求体中 将params改为 data就行