一 axios是什么
上古浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好。并且我们只是需要修改页面的部分数据，但是从服务器端发送的却是整个页面的数据，十分消耗网络资源。而我们只是需要修改页面的部分数据，也希望不刷新页面，因此异步网络请求就应运而生。
Ajax(Asynchronous JavaScript and XML)：异步网络请求。Ajax能够让页面无刷新的请求数据。
实现ajax的方式有多种，如jQuery封装的ajax，原生的XMLHttpRequest，以及axios。但各种方式都有利弊
- 原生的XMLHttpRequest的配置和调用方式都很繁琐，实现异步请求十分麻烦
- jQuery的ajax相对于原生的ajax是非常好用的，但是没有必要因为要用ajax异步网络请求而引用jQuery框架
Axios，可以理解为ajax i/o system，这不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不过它是基于Promise的，符合最新的ES规范。
二 Axios请求方式
1、axios可以请求的方法：
get：获取数据，请求指定的信息，返回实体对象
post：向指定资源提交数据（例如表单提交或文件上传）
put：更新数据，从客户端向服务器传送的数据取代指定的文档的内容
patch：更新数据，是对put方法的补充，用来对已知资源进行局部更新
delete：请求服务器删除指定的数据总结：上述方法中均对应两种写法：（1）使用别名：形如axios.get()；（2）不使用别名形如axios()；
2、get请求
示例代码
此时表示，参数为id=12，最终的请求路径Request URL: http://localhost:8080/data.json?id=12
<script>
import axios from 'axios'
export default {
name: 'get请求'，
components: {},
created() {
//写法一
axios.get('接口地址', {
params: {
id: 12,//请求参数
},
}).then(
(res) => {
//执行成功后代码处理
}
)
//写法二
axios({
method: 'get',//请求方法
params: {
id: 12,//请求参数
},
url: '后台接口地址',
}).then(res => {
//执行成功后代码处理
})
}
}
</script>
3、post请求
post请求一般分为两种类型
-
form-data（常用于表单提交（图片上传、文件上传）） -
application/json一般是用于 ajax 异步请求
示例代码
form-data请求方式代码如下
注意：请求地址Request URL: http://localhost:8080/data.json，
请求头中Content-Type: multipart/form-data; boundary=----WebKitFormBoundarydgohzXGsZdFwS16Y
参数形式：id:12
<script>
import axios from 'axios'
export default {
name: 'get请求'，
components: {},
created() {
//写法一
let data = {
id:12
}
let formData = new formData()
for(let key in data){
fromData.append(key,data[key])
}
axios.post('接口地址', fromData}).then(
(res) => {
//执行成功后代码处理
}
)
//写法二
axios({
method: 'post',//请求方法
data: fromData,
url: '后台接口地址',
}).then(res => {
//执行成功后代码处理
})
}
}
</script>
applicition/json请求方式代码如下
注意：请求地址Request URL: http://localhost:8080/data.json，
请求头中Content-Type: application/json;charset=UTF-8
参数形式：{id:12}
<script>
import axios from 'axios'
export default {
name: 'get请求'，
components: {},
created() {
//写法一
let data={
id:12
}
axios.post('接口地址', data}).then(
(res) => {
//执行成功后代码处理
}
)
//写法二
axios({
method: 'post',//请求方法
data: data,
url: '后台接口地址',
}).then(res => {
//执行成功后代码处理
})
}
}
</script>
4、put和patch请求
示例代码put请求
<script>
import axios from 'axios'
export default {
name: 'get请求'，
components: {},
created() {
//写法一
let data = {
id:12
}
axios.put('接口地址', data}).then(
(res) => {
//执行成功后代码处理
}
)
//写法二
axios({
method: 'put',//请求方法
data: data,
url: '后台接口地址',
}).then(res => {
//执行成功后代码处理
})
}
}
</script>
patch请求
<script>
import axios from 'axios'
export default {
name: 'get请求'，
components: {},
created() {
//写法一
let data = {
id:12
}
axios.patch('接口地址', data}).then(
(res) => {
//执行成功后代码处理
}
)
//写法二
axios({
method: 'patch',//请求方法
data: data,
url: '后台接口地址',
}).then(res => {
//执行成功后代码处理
})
}
}
</script>
5、delete请求
示例代码参数以明文形式提交=>params
注意：params方式会将请求参数拼接在URL上面，Request URL: http://localhost:8080/data.json?id=12
参数形式：id:12
Content-Type: text/html; charset=utf-8
axios
.delete("/data.json", {
params: {
id: 12
}
})
.then(res => {
console.log(res, "delete");
});
let params = {
id: 12
};
axios({
method:'delete',
url:'/data.json',
params:params
}).then(res=>{
console.log(res)
})
参数以封装对象的形式提交=>data
data方式不会讲参数拼接，是直接放置在请求体中的，Request URL:http://localhost:8080/data.json
参数形式：{id:12}
Content-Type: application/json;charset=UTF-8
//方法二
axios
.delete("/data.json", {
data: {
id: 12
}
})
.then(res => {
console.log(res, "delete");
});
let data = {
id: 12
};
axios({
method:'delete',
url:'/data.json',
data:data
}).then(res=>{
console.log(res)
})
6、并发请求
并发请求，就是同时进行多个请求，并统一处理返回值。
在例子中，我们使用axios.all，对data.json/city.json同时进行请求，使用axios.spread，对返回的结果分别进行处理。代码如下：
示例代码
// 并发请求
axios.all([axios.get("/data.json"), axios.get("/city.json")]).then(
axios.spread((dataRes, cityRes) => {
console.log(dataRes, cityRes);
})
);
三 Axios实例
1、创建axios实例
示例代码
let instance = this.$axios.create({
baseURL: 'http://localhost:9090',
timeout: 2000
})
instance.get('/goods.json').then(res=>{
console.log(res.data);
})
可以同时创建多个axios实例。
axios实例常用配置：
- baseURL 请求的域名，基本地址，类型：String
- timeout 请求超时时长，单位ms，类型：Number
- url 请求路径，类型：String
- method 请求方法，类型：String
- headers 设置请求头，类型：Object
- params 请求参数，将参数拼接在URL上，类型：Object
- data 请求参数，将参数放到请求体中，类型：Object
2、axios全局配置
示例代码
//配置全局的超时时长
this.$axios.defaults.timeout = 2000;
//配置全局的基本URL
this.$axios.defaults.baseURL = 'http://localhost:8080';
3、axios实例配置
示例代码
let instance = this.$axios.create();
instance.defaults.timeout = 3000;
4、axios请求配置
示例代码
this.$axios.get('/goods.json',{
timeout: 3000
}).then()
以上配置的优先级为：请求配置 > 实例配置 > 全局配置
四、拦截器
拦截器：在请求或响应被处理前拦截它们
1、请求拦截器
示例代码
// 请求拦截器
axios.interceptors.request.use(config => {
// 在发送请求前做些什么
return config;
}, err=>{
// 在请求错误的时候的逻辑处理
return Promise.reject(err)
});
2、响应拦截器
示例代码文章来源：https://www.toymoban.com/news/detail-726779.html
// 响应拦截器
axios.interceptors.response.use(res => {
// 在请求成功后的数据处理
return res;
}, err=>{
// 在响应错误的时候的逻辑处理
return Promise.reject(err)
});
3、取消拦截
示例代码文章来源地址https://www.toymoban.com/news/detail-726779.html
let inter = axios.interceptors.request.use(config=>{
config.header={
auth:true
}
return config
})
axios.interceptors.request.eject(inter)
到了这里，关于9-AJAX-下-axios的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
