axios的使用
1、axios的根本使用1.1、简介
说到axios我们就不得不说下Ajax。在旧欣赏器页面在向服务器哀求数据时，由于返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好。并且我们只是必要修改页面的部分数据，但是从服务器端发送的却是整个页面的数据，十分消耗网络资源。而我们只是必要修改页面的部分数据，也希望不刷新页面，因此异步网络哀求就应运而生。
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具备以下特点：
在欣赏器中创建XMLHttpRequest哀求
在node.js中发送http哀求
支持Promise API
拦截哀求和响应
转换哀求和响应数据
取消要求
自动转换JSON数据
1.2、安装
1.2.1、通过cdn引入
<script src="https://unpkg.com/axios/dist/axios.min.js"> </script> 1.3、根本使用
1.3.1、准备服务器
模拟服务器，这里使用json-server
（1）安装json-server
npm install -g json-server
（2）创建数据源
在空文件夹下创建JSON文件作为数据源，例如 db.json
{
"list": [
{
"id": "1",
"name": "唐僧",
"age": 20,
"address": "东土大唐"
},
{
"id": "2",
"name": "孙悟空",
"age": 500,
"address": "花果山"
},
{
"id": "3",
"name": "猪八戒",
"age": 330,
"address": "高老庄"
},
{
"id": "4",
"name": "沙悟净",
"age": 200,
"address": "流沙河"
},
{
"id": "5",
"name": "红孩儿",
"age": 10,
"address": "火焰山"
}
]
} （3）启动服务器
使用以下命令启动json-server，并将JSON文件作为参数通报给服务器。这将在当地计算机的3000端口上启动服务器，并将db.json文件中的数据暴露为RESTful API。
方式一、//db.json是文件名
json-serverdb.json 方式二、
json-server --watch db.json 方式三、
跟db.json同级目次，创建package.json文件，配置别名
{
"scripts":{
"mock":"json-server --watch db.json --port 3001"
}
} 启动方式：npm run mock
1.3.2、各种哀求方式
1.3.2.1、get哀求
获取数据，哀求指定的信息，返回实体对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="../js/axios.js"></script>
<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
<style>
#warp {
width: 400px;
margin: 50px auto;
}
.showUser {
width: 400px;
margin: 10px auto;
height: 260px;
border: 1px solid red;
}
li {
line-height: 2;
background-color: pink;
margin: 10px;
}
</style>
</head>
<body>
<div id="warp">
<button onclick="getInfo()">get请求</button>
<ul class="showUser"></ul>
</div>
<script>
// get请求
async function getInfo() {
// 请求结果处理方法一：
// axios.get("http://localhost:3000/list").then(
// (res) => {
// // 将请求到的结果进行渲染
// render(res.data);
// },
// (err) => {
// console.log(err);
// }
// );
// 请求结果处理方法二：
// axios
// .get("http://localhost:3000/list")
// .then((res) => {
// // 将请求到的结果进行渲染
// render(res.data);
// })
// .catch((err) => {
// console.log(err);
// });
// 请求结果处理方法三：推荐使用第三种
try {
let res = await axios.get("http://localhost:3000/list");
render(res.data);
} catch (error) {
console.log(err);
}
}
// 渲染函数
function render(data) {
let showUser = document.querySelector(".showUser");
let str = "";
data.forEach((item) => {
str += `<li>${item.name}<a href='#'>删除</a></li>`;
});
showUser.innerHTML = str;
}
</script>
</body>
</html> 此外get哀求，还可以携带参数
// get请求带参数方式一
// try {
// let res = await axios.get("http://localhost:3000/list?id=1");
// render(res.data);
// } catch (error) {
// console.log(err);
// }
// get请求带参数方式二
try {
let res = await axios.get("http://localhost:3000/list", {
params: {
id: 2,
},
});
render(res.data);
} catch (error) {
console.log(err);
} 1.3.2.2、post哀求：
向指定资源提交数据（例如表单提交或文件上传）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="../js/axios.js"></script>
<style>
#warp {
width: 400px;
margin: 50px auto;
}
.showUser {
width: 400px;
margin: 10px auto;
height: 260px;
border: 1px solid red;
}
li {
line-height: 2;
background-color: pink;
margin: 10px;
}
</style>
</head>
<body>
<div id="warp">
<button onclick="postInfo()">post请求</button>
<ul class="showUser"></ul>
</div>
<script>
// post请求
async function postInfo() {
await axios.post("http://localhost:3000/list",
{
name: "蜘蛛精",
age: 200,
address: "盘丝洞",
});
// 重新获取数据，渲染
let res = await axios.get("http://localhost:3000/list");
render(res.data);
// console.log(res.data);
}
// 渲染函数
function render(data) {
let showUser = document.querySelector(".showUser");
let str = "";
data.forEach((item) => {
str += `<li>${item.name}<a href='#'>删除</a></li>`;
});
showUser.innerHTML = str;
}
</script>
</body>
</html> 1.3.2.3、put哀求：
更新数据，从客户端向服务器传送的数据取代指定的文档的内容
会把更新的数据完全替代原数据，假如只修改了部分的数据，原数据其他内容都会丢失
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="../js/axios.js"></script>
<style>
#warp {
width: 400px;
margin: 50px auto;
}
.showUser {
width: 400px;
margin: 10px auto;
height: 260px;
border: 1px solid red;
}
li {
line-height: 2;
background-color: pink;
margin: 10px;
}
</style>
</head>
<body>
<div id="warp">
<button onclick="putInfo()">put请求-修改数据</button>
<ul class="showUser"></ul>
</div>
<script>
// put请求
async function putInfo() {
let res = await axios.put("http://localhost:3000/list/1", {
name: "玉皇大帝",
});
// 渲染
getData()
}
// 重新获取数据，渲染
async function getData() {
let res = await axios.get("http://localhost:3000/list");
render(res.data);
}
// 渲染函数
function render(data) {
let showUser = document.querySelector(".showUser");
let str = "";
data.forEach((item) => {
str += `<li>${item.name}<a href='#'>删除</a></li>`;
});
showUser.innerHTML = str;
}
</script>
</body>
</html> 1.3.2.4、patch哀求：
更新数据，是对put方法的补充，用来对已知资源进行局部更新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="../js/axios.js"></script>
<style>
#warp {
width: 400px;
margin: 50px auto;
}
.showUser {
width: 400px;
margin: 10px auto;
height: 260px;
border: 1px solid red;
}
li {
line-height: 2;
background-color: pink;
margin: 10px;
}
</style>
</head>
<body>
<div id="warp">
<button onclick="patchInfo()">patch请求-修改数据</button>
<ul class="showUser"></ul>
</div>
<script>
// patch请求
async function patchInfo() {
let res = await axios.patch("http://localhost:3000/list/2", {
name: "王母娘娘",
});
// 渲染
getData();
}
// 重新获取数据，渲染
async function getData() {
let res = await axios.get("http://localhost:3000/list");
render(res.data);
}
// 渲染函数
function render(data) {
let showUser = document.querySelector(".showUser");
let str = "";
data.forEach((item) => {
str += `<li>${item.name}<a href='#'>删除</a></li>`;
});
showUser.innerHTML = str;
}
</script>
</body>
</html> 1.3.2.5、delete哀求：
哀求服务器删除指定的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="../js/axios.js"></script>
<style>
#warp {
width: 400px;
margin: 50px auto;
}
.showUser {
width: 400px;
margin: 10px auto;
height: 260px;
border: 1px solid red;
}
li {
line-height: 2;
background-color: pink;
margin: 10px;
}
</style>
</head>
<body>
<div id="warp">
<button onclick="deleteInfo()">delet请求-修改数据</button>
<ul class="showUser"></ul>
</div>
<script>
// delete请求
async function deleteInfo() {
let res = await axios.delete("http://localhost:3000/list/1");
// 渲染
getData();
}
// 重新获取数据，渲染
async function getData() {
let res = await axios.get("http://localhost:3000/list");
render(res.data);
}
// 渲染函数
function render(data) {
let showUser = document.querySelector(".showUser");
let str = "";
data.forEach((item) => {
str += `<li>${item.name}<a href='#'>删除</a></li>`;
});
showUser.innerHTML = str;
}
</script>
</body>
</html> 1.3.3、axios的配置
配置的优先级为：哀求配置 > 实例配置 > 全局配置
1.3.3.1、全局配置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="../js/axios.js"></script>
</head>
<body>
<button id="btn" onclick="getData()">发送请求</button>
<script>
//配置全局的超时时长
axios.defaults.timeout = 2000;
//配置全局的基本URL
axios.defaults.baseURL = "http://localhost:3000";
async function getData() {
try {
let res1 = await axios.get("/list");
let res2 = await axios.get("/user");
console.log(res1.data);
console.log(res2.data);
} catch (error) {
console.log(error);
}
}
</script>
</body>
</html> 1.3.3.2、实例配置
在一个项目中，我们会有很多不同的哀求，假如都用axios去哀求，很容易造成辩论，以是我们可以去创建axios的实例，通过不同的实例去哀求，配置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="../js/axios.js"></script>
</head>
<body>
<button id="btn" onclick="getData()">发送请求</button>
<script>
async function getData() {
// 创建实例1，创建同时配置
let instance = axios.create({
baseURL: "http://localhost:3000",
timeout: 2000,
});
let res = await instance.get("/list");
console.log(res.data);
// 创建实例2，现创建，再配置
let instance2 = axios.create();
instance2.defaults.timeout = 2;
instance2.defaults.baseURL = "http://localhost:3000";
let res2 = await instance.get("/user");
console.log(res2.data);
}
</script>
</body>
</html>
axios实例常用配置：
[*]
[*]baseURL 哀求的域名，基当地址，类型：String
[*]timeout 哀求超时时长，单位ms，类型：Number
[*]url 哀求路径，类型：String
[*]method 哀求方法，类型：String
[*]headers 设置哀求头，类型：Object
[*]params 哀求参数，将参数拼接在URL上，类型：Object
[*]data 哀求参数，将参数放到哀求体中，类型：Object
1.3.3.3、哀求配置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="../js/axios.js"></script>
</head>
<body>
<button id="btn" onclick="getData()">发送请求</button>
<script>
async function getData() {
let res = await axios.get("http://localhost:3000/list", {
timeout: 2000,
});
console.log(res.data);
}
</script>
</body>
</html> 1.3.4、axios的拦截器
axios给我们提供了两大类拦截器
哀求方向的拦截（乐成哀求，失败哀求）
响应方向的拦截（乐成的，失败的）
拦截器的作用，用于我们在网络哀求的时候，在发起哀求或者响应时对操作进行处理
例如：发送哀求时，可以添加网页加载的动画，或认证token，强制用户先登录再哀求数据
响应的时候，可以竣事网页加载的动画，或者对响应的数据进行处理
1.3.4.1、哀求拦截器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="../js/axios.js"></script>
</head>
<body>
<button id="btn" onclick="getData()">发送请求</button>
<script>
// 请求拦截器
async function getData() {
axios.interceptors.request.use(
(config) => {
// 发生请求前的一系列的处理
console.log("开启加载动画");
console.log("认证是否有token，如果没有，要去登录");
return config; //拦截后的放行
},
(err) => {
// 请求错误处理
return Promise.reject(err);
}
);
let res = await axios.get("http://localhost:3000/list");
console.log(res.data);
}
</script>
</body>
</html> 1.3.4.2、相应拦截器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="../js/axios.js"></script>
</head>
<body>
<button id="btn" onclick="getData()">发送请求</button>
<script>
// 响应拦截器
async function getData() {
axios.interceptors.response.use(
(config) => {
// 数据回来前的一系列的处理
console.log("关闭加载动画");
console.log("对数据进行一些数据");
return config.data; //拦截后的放行
},
(err) => {
// 响应错误处理
return Promise.reject(err);
}
);
let res = await axios.get("http://localhost:3000/list");
console.log(res.data);
}
</script>
</body>
</html> 1.3.4.3、取消拦截
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="../js/axios.js"></script>
</head>
<body>
<button id="btn" onclick="getData()">发送请求</button>
<script>
// 请求拦截器
async function getData() {
let instance = axios.create();
instance.interceptors.request.use(
(config) => {
// 发生请求前的一系列的处理
console.log("开启加载动画");
console.log("认证是否有token，如果没有，要去登录");
return config; //拦截后的放行
},
(err) => {
// 请求错误处理
return Promise.reject(err);
}
);
// 取消拦截
axios.interceptors.request.eject(instance);
let res = await axios.get("http://localhost:3000/list");
console.log(res.data);
}
</script>
</body>
</html> 2、Vue中axios的使用
2.1、根本使用
2.1.1、npm安装
终端安装：
npm install axios 2.1.2、在Vue原型上配置$axios
在vue项目的main.js文件中引入axios
// 导入axios
import axios from 'axios'
// 将axios放到Vue原型上，这样vm，vc身上就都有axios了
Vue.prototype.$axios=axios
2.1.3、在组件中使用：
<button @click="getDate">点击发送请求</button>
<script>
export default {
name: 'App',
methods: {
async getDate() {
let res = await this.$axios.get('http://localhost:3000/list')
console.log(res.data);
}
}
}
</script> 2.2、一次封装
假如是多个组件都必要发送哀求，而且每次哀求前，我们都要进行一些验证处理等，可以进行简单封装
2.2.1、封装request.js
src/utils创建request.js
/* 封装axios用于发送请求 */
import axios from "axios";
/*
(1)request 相当于 Axios 的实例对象
(2)为什么要有request,而不是直接用axios
* 项目开发中，有可能会有两个基地址
* 不同的接口配置不同（有的要token,有的不要token）
*/
const request = axios.create({
baseURL: "http://localhost:3000", // 设置基地址
timeout: 2000, // 请求超时：当2s没有响应就会结束请求
});
// 添加请求拦截器，一下内容是axios的拦截器，可以不用写
request.interceptors.request.use(
function (config) {
// 发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
// 例如1
config.data = JSON.stringify(config.data); // 数据转化,也可以使用qs转换
// 例如2
config.headers = {
"Content-Type": "application/x-www-form-urlencoded", // 配置请求头
};
// 例如3
//注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie
const token = getCookie("名称"); // 这里取token之前，你肯定需要先拿到token,存一下
if (token) {
config.params = { token: token }; // 如果要求携带在参数中
config.headers.token = token; // 如果要求携带在请求头中
}
return config; //拦截后的放行
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
request.interceptors.response.use(
function (response) {
// 对响应数据做点什么
console.log('关闭请求数据动画');
console.log('对数据进行处理');
return response.data; //只要响应对象中的数据
},
function (error) {
// 对响应错误做点什么
return Promise.reject(error);
}
);
export default request;
第一次封装，引入了基地址与拦截器
2.2.2、组件中使用
<script>
import request from '../utils/request'
export default {
name: 'ShowList',
methods: {
async getList() {
// 基本路径已经配置过
let res = await request.get('/list')
//这里的res也是响应拦截器里处理之后的结果
console.log(res);
}
}
}
</script> <script>
import request from '@/utils/request';
export default {
name: 'ShowUser',
methods: {
async getUser() {
let res = await request.get('/user')
console.log(res);
}
}
}
</script> 2.3、二次封装
项目当中会有很多的页面，假如每个页面中都会多次哀求，将我们的哀求都写在对应的页面中，比较难以维护，以是可以将哀求再次进行封装，类似如下效果：
https://i-blog.csdnimg.cn/img_convert/cb5b79085bfcf8c961f36d978deb2845.png
src/apis/showList.js
// 导入一次封装的request
import request from "@/utils/request";
// 请求list数据
export function getListInfo1() {
return request.get("/list");
}
// 请求user数据
export function getUserInfo1() {
return request.get("/user");
} showList.vue
<script>
import { getListInfo1, getUserInfo1 } from '../apis/showList'
export default {
name: 'ShowList',
methods: {
async getList1() {
// 调用请求函数
let res = await getListInfo1()
console.log(res);
},
async getUser1() {
let res = await getUserInfo1()
console.log(res);
}
}
}
</script>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]