axios在vue中的使⽤⼀、Axios是什么
Axios是⼀个基于promise的HTTP库（类似于jQuery的Ajax，⽤于HTTP请求）
jquery在项目里是干啥的
可以⽤于浏览器和node.js（既可以⽤于客户端也可以⽤于node.js编写的服务端）
⼆、Axios有哪些特性
⽀持promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
⾃动转换 JSON 数据
客户端⽀持防御 XSRF
三、Axios浏览器⽀持
四、安装
1.使⽤ npm:
$ npm install axios
2.使⽤ bower:
$ bower install axios
3.使⽤ cdn:
<script src="unpkg/axios/dist/axios.min.js"></script>
五、⽤法（vue项⽬已搭建）
1. Axios基础⽤法（get、post、put 等请求⽅法）
先介绍⼀下，Axios常⽤的⼏种请求⽅法有哪些：get、post、put、patch、delete
get：（⼀般⽤于）获取数据
post：提交数据（表单提交+⽂件上传）
put：更新（或编辑）数据（所有数据推送到后端（或服务端））
patch：更新数据（只将修改的数据推送到后端）
delete：删除数据
题外话，⼀般公司在实际开发项⽬过程中：
（1）post：⼀般⽤于新建
（2）put：⼀般⽤于更新（适合数据量⽐较少的更新）
（3）patch：⼀般⽤于数据量⽐较⼤；假如⼀个表单的数据量很⼤，有很多项，使⽤put的话，全部数据推送⼀次是⽐较耗性能的，这个时候可以考虑⽤patch，只将修改的数据推送到后端
以上这些题外话，只是⼀般的常规⽤法，不能代表⼀定要这样⽤；当然了，你可能会说我⽤post来获取数据，⾏不⾏？这个当然⾏了，绝对没问题！具体怎么⽤还是前后端⼀起商量着决定，以免发⽣不愉快的肢体冲突！
哈哈哈，严重了啊，开个玩笑！
（1）get 请求
<template>
<div>
<div>mmmm</div>
</div>
</template>
<script>
import axios from 'axios'
// get 请求
export default {
name: "get",
created() {
//第⼀种写法叫做get别名请求⽅法
//localhost:8080/static/data.json?id=1
<('../../static/data.json', {
params: {//有参数时，若⽆参数时直接省略不写
id: 1
}
}).then((res) => {
console.log('数据：', res);
})
//第⼆种写法
axios({
method: 'get',
url: '../../static/data.json',
params: {
id: 1
}
}).then((res) => {
console.log('数据：', res)
})
}
}
</script>
<style scoped>
</style>
下⾯了解⼀下请求信息—
**Status Code:304 Not Modified—**304是重定向；正常情况下，第⼀次访问接⼝的时候返回的 都是200；当你第⼆次访问接⼝的时候，如果数据没有变化， 那么浏览器会⾃动识别返回⼀个状态304，代表数据没有更改 、重定向；相当于重定向到你刚刚访问的资源，这样的话会加载 更快！
（2） post 请求
<template>
<div>
<div>mmmm</div>
</div>
</template>
<script>
import axios from 'axios'
// post 请求
export default {
name: "post",
created() {
/*
/*
post常⽤的请求数据（data）格式有两种：
（1）applicition/json
（2）form-data 表单提交（图⽚上传，⽂件上传）
*/
//第⼀种写法叫做post别名请求⽅法
// localhost:8080/static/data.json?id=1
// applicition/json 请求
let data = {
id: 1
}
axios.post('../../static/data.json', data)
.then((res) => {
console.log('数据：', res);
})
/
/第⼆种写法
axios({
method: 'post',
url: '../../static/data.json',
data: data,
}).then((res) => {
console.log('数据：', res)
})
// form-data 请求
let formData = new FormData()
for (let key in data) {
formData.append(key, data[key])
}
axios.post('../../static/data.json', formData)
.then((res) => {
console.log('数据：', res);
})
}
}
</script>
<style scoped>
</style>
了解⼀下，post两种请求⽅式的Content-Type和参数有哪些不同—  applicition/json：如下图
form-data：如下图
（3）put、patch 请求
说明⼀下，put和patch请求与post请求⽤法⼀样类似，同样有applicition/json和form-data，为了节省时间就不过多赘述了，简单写⼀下！
mmmm

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。