一、什么是axios
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 库，简单来说是可以发送GET和POST请求。它有以下优点：
-
从浏览器中创建 XMLHttpRequest
-
从 node.js 发出 http 请求
-
支持 Promise API
-
拦截请求和响应
-
转换请求和响应数据
-
取消请求
-
自动转换 JSON 数据
-
客户端支持防止XSFR攻击
axios中文文档：http://www.axios-js.com/
二、axios的安装使用
- 1.安装：
npm install axios
- 2.导入：
import axios from 'axios';
- 3.axios的简单使用
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>axios</title>
</head>
<body>
<h2>axios使用</h2>
<div id="message"></div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//dom获取节点操作
const axiosElement = document.getElementById("message");
//定义一个axios实例
const axiosconfig = axios.create({
//url地址，baseURL为固定写法
baseURL: "http://www.xxx.com",
// `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
// 如果请求话费了超过 `timeout` 的时间，请求将被中断
timeout: 2000
});
//请求拦截
axiosconfig.interceptors.request.use(config => {
console.log(`拦截>>>>>>>>>>>>`);
//发送请求之前做的操作
return config;
}, err => {
//请求错误的操作
return Promise.reject(err);
});
//响应拦截
axiosconfig.interceptors.response.use(response => {
//对响应数据的操作
console.log(`拦截成功>>>>>>>>>`);
}, err => {
//对响应错误的操作
return Promise.reject(err);
})
//执行操作(GET请求)
axiosconfig({
//路径
url: "/api/find",
//请求数据的方法
method: "GET",
//params是即将与请求一起发送的 URL 参数
params: { id: 1 }
}).then(res => {
//对服务器响应的数据的处理
axiosElement.innerHTML = JSON.stringify(res.data);
}).catch(err => {
//数据获取失败的处理
console.log(err);
})
</script>
</body>
</html>
- 4.对axios的封装(案例)
import axios from 'axios';
//自定义实例默认值
const axiosApi = axios.create({
baseURL: 'http://www.xxx.com:port/path',
timeout: 2000
});
//在请求或响应被 then 或 catch 处理前拦截它们
/**
* 请求拦截
*/
axiosApi.interceptors.request.use(config => {
return config;
}, err => {
return Promise.reject(err);
});
/**
* 响应拦截
*/
axiosApi.interceptors.response.use(response => {
return response;
}, err => {
return Promise.reject(err);
});
export default axiosApi;
import axiosApi from './base.js';
/**
* 用户添加接口
* @param {*} username
* @param {*} psw
*/
export const RequestAdduser = (username, psw) => {
return axiosApi({
url: '/api/add',
method: 'POST',
data: { username, psw }
})
}
/**
* 用户列表接口
*/
export const RequesUserList = () => {
return axiosApi({
url: '/api/list',
method: 'GET',
})
}
网友评论