一、什么是axios?
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
二、特性
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
三、安装使用
1.安装
npm install axios
2.调用
import Axios from 'axios';
三、post请求和get请求
1.登录帐号post请求
import Axios from 'axios';
// url地址
Axios.post("http://it.warmtel.com/api/login", {
//用户名和密码
username: userName,
password: passWord
})
.then(res => {
console.log(res.data);
})
.catch(err => {
console.log("网络出错" + err);
});
2.获取数据get请求
import Axios from "axios";
Axios.get('http://it.warmtel.com/api/find',{
params:{
id: 5
}
}).then(res=>{
console.log(res.data);
}).catch(err=>{
alert(err);
})
3.直接使用Axios对象通用方式去请求数据
（1）get请求
-
注意：在get请求某一条数据的时候，params的作用是将请求的某一条数据的属性id，拼接到url地址后面，如下：http://it.warmtel.com/api/find?id=1
Axios({
url: "http://it.warmtel.com/api/find",
method: "get",
// params的作用是将id值拼接到url地址后面： http://it.warmtel.com/api/find?id=1
params: {
id: 5
}
}) .then(res => {
console.log(res.data);
})
.catch(err => {
console.log(err);
});
（2）post请求
Axios({
url: "http://it.warmtel.com/api/login",
method: "post",
data: {
username,
password
}
}).then(res=>{
console.log(res.data);
const data = res.data;
// 业务逻辑，对状态码resultCode进行判断
if(data.resultCode == 1){
// 路由跳转
this.$router.replace({ path: "/main" });
}else{
this.message = data.resultInfo;
}
}).catch(err => {
console.log(err);
})
4.对axios的封装
（1）创建api文件夹，里面存放请求数据的js模块
（2）创建request.js文件，对axios实例的封装
import Axios from 'axios';
// 创建一个axios实例,封装
const instance = Axios.create({
baseURL: 'http://it.warmtel.com',
timeout: 1000
})
// 暴露出去
export default instance;
（3）创建IndexApi.js文件，对请求某个网络数据的封装
// 引用axios实例示例
import instance from '@/api/request.js';
/** 登录接口API */
const RequestLogin = (username, password) => {
return instance({
url: '/api/login',
method: 'post',
data: {
username,
password
}
})
}
// 将封装的登录接口的方法暴露出去
export { RequestLogin }
（6）登录页面请求数据
// 引用封装的RequestLogin方法
import { RequestLogin } from "@/api/IndexApi.js";
// 有参数输入参数
RequestLogin(userName, passWord)
.then(res => {
console.log(res.data);
const data = res.data;
if (data.resultCode === 1) {
localStorage.setItem('loginUserState', userName);
this.$router.replace({ path: "/main" });
} else {
this.message = data.resultInfo;
}
})
.catch(err => {
console.log(err);
});
（5）备注：
对模块进行暴露时，有两种方式，不同的暴露方式，引用的方式也不一样
// 暴露出去
export { RequestLogin }
// 引用
import { RequestLogin } from "@/api/IndexApi.js";
// 暴露出去
export default RequestUser;
// 引用
import RequestUser from "@/api/UserApi.js";
四、拦截器
1.什么是拦截器
- 拦截器是客户端在请求数据时候，可以去截取数据并处理数据，
- 在请求或响应被 then 或 catch 处理前拦截它们。
- 拦截器里面去进行token令牌验证
2.token令牌
token令牌就是一个字符串
为了避免某些伪造的客户端去请求服务器的数据，便有了token令牌
token令牌在数据请求的过程中去进行校验
-
第一次请求的时候，服务器或返回一个token令牌到客户端，然后后期客户端再次请求数据的时候，会把token令牌发送到服务器，服务器会对token令牌进行校验判断
拦截器放在这里的request.js模块文件中
（1）请求拦截器
1.在请求数据成功的时候，写入以下代码
- localStorage对象对本地数据的存储
- res.data的token值为令牌，进行请求数据权限检测的
- 将token的值存储在本地，设置属性值为token
localStorage.setItem('token', res.data.token);
2.在请求拦截器中去取到token值
- 取出存在本地的token值
- 设置token到请求头，发送到服务端
import Axios from 'axios';
// 创建一个axios实例,封装
const instance = Axios.create({
baseURL: 'http://it.warmtel.com',
timeout: 1000
})
// instance为创建的axios实例
instance.interceptors.request.use((config) => {
// 在发送请求之前做些什么
console.log('请求拦截器', config);
// 设置token到请求头，发送到服务端
const token = localStorage.getItem('token');
if (token) {
config.headers.common.Authorization = token;
}
// 这里必须返回config,这样请求才能正常往下请求数据
return config;
}, (err) => {
// 请求错误做些什么
return Promise.reject(err);
})
// 暴露出去
export default instance;
-
token值设置成功
（2）响应拦截器
instance.interceptors.response.use((config) => {
// 响应做些什么
console.log('响应拦截器 ', config);
return config;
}, (err) => {
// 对响应错误做些什么
return Promise.reject(err);
})