1. 什么是axios
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,简单的理解就是ajax的封装,只不过它是Promise的实现版本。
特性:
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
2. 怎么导入axios
-
安装:在vscode的集成终端中输入npm i axios 的命令下载axios模块。
-
在html文件中引入
方法一:外部引入
html
<script src="./node_modules/axios/dist/axios.js"></script>
方法二:内部引入
html
<body>
<script type="module">
// 引入方法二
import axios from "./node_modules/axios/dist/esm/axios.js"
</script>
</body>
3. 简单的get请求
写法一:
javascript
<body>
<script type="module">
// 引入方法二
import axios from "./node_modules/axios/dist/esm/axios.js";
axios({
url: "http://localhost:4003/users"
}).then(function (result) {
console.log(result);
console.log(result.data);
})
</script>
</body>
写法二:
html
<body>
<script type="module">
// 引入方法二
import axios from "./node_modules/axios/dist/esm/axios.js";
init();
async function init() {
let result = await axios({
url: "http://localhost:4003/users"
})
console.log(result);
console.log(result.data);
}
</script>
</body>
4. axios可配置的属性
axios可配置的属性:
- url:服务器的地址。
- method:请求方法的类型。
- params**(用于get)/ data(用于post)**:传的参数。是key-value键值对。
- headers :请求头部信息。是key-value键值对。
- responseType:服务器响应的数据类型。是什么数据类型,响应的数据就会转化为什么数据类型。
例如:responseType: "json" -->服务器响应的数据是json数据
- then((response)=>{...}) :请求成功执行的函数。
- catch((error)=>{...}):请求失败执行的函数。
5. axios的get配置
5.1 配置方法一
配置模板:
javascript
axios({
url: "被访问服务器地址",
// 默认请求方式为get
method: "get",
// 传递参数
params: {
key: value
},
// 设置请求头信息
headers: {
key: value
},
// 服务器响应的数据是json数据
responseType: "json"
}).then((response) => {
// 请求成功
let res = response.data;
console.log(res);
}).catch((error) => {
// 请求失败,
console.log(error);
});
案列:
javascript
<body>
<script type="module">
// 引入方法二
import axios from "./node_modules/axios/dist/esm/axios.js";
init();
async function init() {
let result = await axios({
url: "http://localhost:4003/users",
method: "get",
params: { user: "kwj", password: "kwj123456" },
headers: { "X-Token": "kwj123456" },
responseType: "json"
})
console.log(result);
console.log(result.data);
}
</script>
</body>
5.2 配置方法二
配置模板:
javascript
axios.get("url", {
// 传递参数
params: {
key: value
},
// 设置请求头信息,可以传递空值
headers: {
key: value
}
}).then((response) => {
// 请求成功
let res = response.data;
console.log(res);
}).catch(error => {
// 请求失败,
console.log(error);
});
案列:
javascript
<body>
<script type="module">
// 引入方法二
import axios from "./node_modules/axios/dist/esm/axios.js";
init();
async function init() {
let result = await axios.get("http://localhost:4003/users", {
params: { user: "kwj", password: "kwj123456" },
headers: { "X-Token": "kwj123456" },
responseType: "json"
});
console.log(result);
console.log(result.data);
}
</script>
</body>
6. axios的post配置
6.1 配置方法一
配置模板:
javascript
axios({
url: "被访问服务器地址",
method: "post",
// 传递参数
data: {
key: value
},
// 设置请求头信息
headers: {
key: value
},
responseType: 'json'
}).then((response) => {
// 请求成功
let res = response.data;
console.log(res);
}).catch(error => {
// 请求失败,
console.log(error);
});
案列:
javascript
<body>
<script type="module">
// 引入方法二
import axios from "./node_modules/axios/dist/esm/axios.js";
init();
async function init() {
let result = await axios({
url: "http://localhost:4003/postusers",
method: "post",
data: { user: "kwj", password: "kwj123456" },
headers: { "X-Token": "kwj123456" },
responseType: "json"
})
console.log(result);
console.log(result.data);
}
</script>
</body>
6.2 配置方法二
配置模板:
javascript
let data = {
key: value
},
headers = {
USERID: "",
TOKEN: ""
};
// 若无headers信息时,可传空对象占用参数位置
axios.post("url", data, {headers}
).then((response) => {
// 请求成功
let res = response.data;
console.log(res);
}).catch((error) => {
// 请求失败,
console.log(error);
});
案列:
javascript
<body>
<script type="module">
// 引入方法二
import axios from "./node_modules/axios/dist/esm/axios.js";
init();
async function init() {
let result = await axios.post("http://localhost:4003/postusers", { user: "kwj", password: "kwj123456" });
console.log(result);
console.log(result.data);
}
</script>
</body>
7. axios并发处理
并发方法:
axios.all([ ]) :同时发送多个请求 。注意该方法的参数是数组。
axios.spread():在then方法 中执行了 axios.spread 方法。接收axios.all方法中每个请求返回的响应。
案列1:
javascript
<body>
<script type="module">
// 引入方法二
import axios from "./node_modules/axios/dist/esm/axios.js";
init();
async function init() {
let resultList = await axios.all([
axios.get("http://localhost:4003/users", {
params: { a: 4, b: 3 },
headers: { "X-Token": "kwj123456" },
responseType: "json"
}),
axios.post("http://localhost:4003/postusers", { user: "kwj", password: "kwj123456" })
])
console.log(resultList);
}
</script>
</body>
案列2:把案列1改为解构 ,下面有两种解决方法,推荐使用写法一。
javascript
<body>
<script type="module">
// 引入方法
import axios from "./node_modules/axios/dist/esm/axios.js";
//写法一:解构方法
init();
async function init() {
let [result1, result2] = await axios.all([
axios.get("http://localhost:4003/users", {
params: { a: 4, b: 3 },
headers: { "X-Token": "kwj123456" },
responseType: "json"
}),
axios.post("http://localhost:4003/postusers", { user: "kwj", password: "kwj123456" })
])
console.log(result1, result2);
}
----------------------------------------------------------------------------------------
//写法二:在then方法中执行了 axios.spread 方法
axios.all([
axios.get("http://localhost:4003/users", {
params: { a: 4, b: 3 },
headers: { "X-Token": "kwj123456" },
responseType: "json"
}),
axios.post("http://localhost:4003/postusers", { user: "kwj", password: "kwj123456" })
]).then(axios.spread((res1, res2) => {
console.log(res1, res2);
}))
</script>
</body>
8. axios的全局配置
8.1 简单的全局配置
- 在js文件夹下创建一个request.js.js文件,并编写js文件。
javascript
// 1.引入axios包
import axios from "../node_modules/axios/dist/esm/axios.js";
// 默认导出axios接口
export default axios;
- 在html文件中使用它
javascript
<body>
<script type="module">
// 引入编写的文件
import request from "./js/request.js";
request.get("http://localhost:4003/users", {
params: { a: 4, b: 3 },
headers: { "X-Token": "kwj123456" },
responseType: "json"
}).then(function (res) {
console.log(res);
})
</script>
</body>
8.2 axios全局配置的基础配置
axios的全局配置的好处 :可以设置一下基础的配置,例如默认路劲,超时时间等。
request.js文件:
javascript
// 1.引入axios包
import axios from "../node_modules/axios/dist/esm/axios.js";
// 2. 配置默认路劲
axios.defaults.baseURL = "http://localhost:4003";
// 3. 配置超时时间
axios.defaults.timeout = 3000;
//4.默认导出axios接口
export default axios;
html文件:
javascript
<body>
<script type="module">
// 引入编写的文件
import request from "./js/request.js";
request.get("/users", {
params: { a: 4, b: 3 },
headers: { "X-Token": "kwj123456" },
responseType: "json"
}).then(function (res) {
console.log(res);
})
</script>
</body>
8.3 创建 axios实例
通过创建 axios实例可以访问不同的服务器路劲,用于不同的请求访问。想要访问哪些路劲可以单独创建不同的axios实例。
- 创建一个request1.js文件:
javascript
// 1.引入axios包
import axios from "../node_modules/axios/dist/esm/axios.js";
// 2.创建axios实例
const instance = axios.create({
baseURL: "http://localhost:4003",
timeout: 3000
})
//3.默认导出axios接口
export default instance;
- 创建一个request2.js文件:
javascript
// 1.引入axios包
import axios from "../node_modules/axios/dist/esm/axios.js";
// 2.创建axios实例
const instance = axios.create({
baseURL: "http://localhost:4004",
timeout: 3000
})
//3.默认导出axios接口
export default instance;
- 创建一个html文件,引入request1.js文件和request2.js文件。
javascript
<body>
<script type="module">
// 引入编写axios实例的文件
import request1 from "./js/request1.js";
import request2 from "./js/request2.js";
//通过axios实例可以访问到不同的服务器的路劲
request1.get("/users", {
params: { a: 4, b: 3 },
headers: { "X-Token": "kwj123456" },
responseType: "json"
}).then(function (res) {
console.log(res);
})
</script>
</body>
9. axios拦截器
9.1 拦截器的分类
- 请求拦截器(成功回调函数,失败回调函数)
- 响应拦截器(成功回调函数,失败回调函数)
9.2 请求拦截器使用方法
1. 请求拦截器
写法一:
axios.interceptors.request.use(成功回调函数,失败回调函数)
写法二:
axios实例对象名.interceptors.request.use(成功回调函数,失败回调函数)
请求拦截器中有两个回调函数,一个是请求成功时的拦截器 **,**一个是请求失败时的拦截器。不管是成功还是失败都要return 返回结果。
2. 请求拦截器的作用 :一般用于发送请求时加入Cookie 或者LocalStorage中的部分数据,让指定的路由请求都携带这些数据。例如: 可以根据所给定的路由在请求拦截器中 给特定请求添加统一的请求头部信息,例如token。
案列:
- 创建一个request1.js文件:
javascript
// 1.引入axios包
import axios from "../node_modules/axios/dist/esm/axios.js";
// 2.创建axios实例
const instance = axios.create({
baseURL: "http://localhost:4003",
timeout: 3000
})
//3.请求拦截器
instance.interceptors.request.use((request) => {
// 请求成功,判断是否是注册页面的路由或者是登录页面的路由
if (!/register|login/.test(request.url)) {
//添加请求头部信息
request.headers.user = localStorage.user;
request.headers.token = localStorage.token;
}
return request;
}, (error) => {
//请求失败
return error;
})
//4.默认导出axios接口
export default instance;
- 创建一个html文件,引入request1.js文件。
html
<body>
<script type="module">
// 引入编写axios实例的文件
import request1 from "./js/request1.js";
import request2 from "./js/request2.js";
//通过axios实例可以访问到不同的服务器的路劲
request1.get("/users", {
params: { a: 4, b: 3 },
headers: { "X-Token": "kwj123456" },
responseType: "json"
}).then(function (res) {
console.log(res);
})
</script>
</body>
9.3 响应拦截器使用方法
1. 响应拦截器:
写法一:
axios.interceptors.response.use(成功回调函数,失败回调函数)
写法二:
axios实例对象名.interceptors.response.use(成功回调函数,失败回调函数)
请求拦截器中有两个回调函数,一个是请求成功时的拦截器 **,**一个是请求失败时的拦截器。不管是成功还是失败都要return 返回结果。
2. 响应拦截器的作用:
- 预先解析处理部分接口相同的数据。
- 接收服务器返回的数据时,可以得到服务器设置的部分头部信息、Cookie或者LocalStorage中数据直接进行存储。
- 当响应的结果有问题时,可以使用响应拦截器进行处理,控制路由的跳转。比如发信息时没有携带token,这时候返回的信息中提示没有携带token就可以跳转到登录页面。
案列:
javascript
// 1.引入axios包
import axios from "../node_modules/axios/dist/esm/axios.js";
// 2.创建axios实例
const instance = axios.create({
baseURL: "http://localhost:4003",
timeout: 3000
})
//3.请求拦截器
instance.interceptors.request.use((request) => {
// 请求成功,判断是否是注册页面的路由或者是登录页面的路由
if (!/register|login/.test(request.url)) {
//添加请求头部信息
request.headers.user = localStorage.user;
request.headers.token = localStorage.token;
}
return request;
}, (error) => {
//请求失败
return error;
})
//4.响应拦截器
instance.interceptors.response.use((response) => {
if (!/register/.test(response.url)) {
//获取请求头部信息
localStorage.user = response.headers.user;
localStorage.token = response.headers.token;
// boll为false时,err为true时
if (!response.data.result.boll || response.data.err) {
// 跳转到登录页面
}
}
return response;
}, (error) => {
//请求失败
return error;
})
//5.默认导出axios接口
export default instance;