Web开发中,我们最常用的HTTP库就是Axios了,它的底层基于Ajax进行封装,在浏览器端和服务端都可以使用。如果大家对一些API不是很熟悉可以参考官方地址,或者中文社区。
为什么要对axios进行二次封装?
对Axios进行了二次封装,从而让我们更好地管理项目,把时间更多地放在业务开发上,节来省更多的时间
axios进行二次封装主要是要用到请求拦截器和响应拦截器;
请求拦截器:可以在发请求之前可以处理一些业务
响应拦截器:当服务器数据返回以后,可以处理一些事情
请求拦截器:
instance.inteceptors.request.use(config=>{
//不是登录接口,需要携带token
if(config.url!=='/user/login'){
config.headers.Authorization=token;
}
return config;
},error=>{
return Promise.reject(error)
});
响应拦截器:
instance.interceptors.response.use(response=>{
//响应成功的回调
let res=response.data;//后端返回的数据
return res;
},error=>{
//响应失败的回调
return Promise.reject(error)
});
快速创建一个名app的vue项目:
在项目路径下安装 Qs
在项目路径下安装 axios
将app运行起来:
在src文件夹中创建一个utils文件夹(utils文件夹一般存放自己封装的工具类函数) 并创建一个request.js文件:
在request.js 文件写axios进行二次封装代码:
// 导入axios
import axios from "axios";
// 导入 Qs
import Qs from "qs";
let qs=Qs;
// 创建axios实例对象 instance
let instance=axios.create({
baseURL:"http://xx.xxx.xxx.xx:xxxx",
timeout:5000
});
// 请求拦截器 interceptors
instance.interceptors.request.use(config=>{
//如果不是登录接口 需要携带token
if(config.url!=='/user/login'){
config.headers.Authorization='eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJNalU9Iiwic3ViIjoiYWRtaW4xIiwiaXNzIjoiMDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjYyN2I0ZjYiLCJpYXQiOjE2NjQ5NTcxMTIsImF1ZCI6InJlc3RhcGl1c2VyIiwiZXhwIjoxNjY1MTI5OTEyLCJuYmYiOjE2NjQ5NTcxMTJ9.aaoYvqD9_rDoSjMeyyvBEt4TFyoMzOYWRi4iErQBUfw'
}
return config
},error=>{
return Promise.reject(error)
});
// 响应拦截器 interceptor-----对axios封装响应的数据做拦截
instance.interceptors.response.use(response=>{
let res=response.data;
return res
},error=>{
return Promise.reject(error)
});
// 封装get方法
export function get(url,params){
return instance.get(url,{
params,
})
}
// 封装postJSON方法。 json格式的数据,一般用于登录接口
export function postJSON(url,data){
return instance.post(url,data);
}
// 封装post方法 表单格式的数据
export function post(url,data){
return instance.post(url,qs.stringify(data))
}
export default instance
AboutView.vue文件代码:
<template>
<div class="about">
<h1>This is an about page</h1>
<button @click="getSwipe">获取所有轮播图</button>
</div>
</template>
<script>
// 导入get方法
import {get} from '../utils/request'
export default{
methods:{
getSwipe(){
get('/carousel/findAll').then(res=>{
console.log(res,'获取后端响应');
})
}
}
}
</script>
HomeView.vue代码:
<template>
<div class="home">
<button @click="toLogin" >登录</button>
</div>
</template>
<script>
// @ is an alias to /src
// 导入postJSON方法
import {postJSON} from '../utils/request'
export default {
name: 'HomeView',
data(){
return{
user:{
username:"admin1",
password:123321
}
}
},
methods:{
async toLogin(){
let res=await postJSON('/user/login',this.user);
console.log(res);
}
}
}
</script>
点击登录按钮:
点击获取所有轮播图按钮:
axios的特点:
1.基于promise的http库
2.可以调用promise的API
3.axios默认发送是get请求,发送的数据的默认格式是json格式
4.axios请求头的数据格式会自动转换。
5.axios将响应数据进行封装
6.axios是基于promise对ajax封装