**
1 为什么要将api封装起来?
在没有封装API之前,我们是类似这样使用 axios 的
this.$axios.post('blogArticle/frontList',parms)
.then((resp) => {
this.blogList = resp.data,
this.blogTotal = resp.total * 1
})
封装之后这样调用
userlist(parms).then(resp => {
this.blogList = resp.data,
this.blogTotal = resp.total * 1
})
我们先不看具体是怎么封装的,但看使用,发现好像写的代码一样多呢。(等你了解了封装之后,可能觉得封装写的代码更多一些)
我最开始就是有这样的疑惑,所有我一直没有使用API的封装,因为我确实找不到使用它的理由。
下面我们来看这个问题:假如上面这个API你在100个页面都使用到了,而这时候后端因为某种原因需要你改一下地址从 /api/app/ 改成 blog/list呢?
那你是不是要改一百次?
改一百次还是时间问题,问题是你知道这一百个页面都在那里嘛?你根本找不到
为了解决上面的问题,和使得代码更加的规范,我们可以把API进行封装。
2 步骤
1.在项目src目录下新建utils文件夹,然后在其中新建 request.js文件,这个文件是主要书写axios的封装过程。
//引入axios
import axios from 'axios'
import store from '../store'
//1. 创建新的axios实例,
const instance = axios.create({
//设置公共接口
baseURL:'https://www.365msmk.com/api/app/',
//设置超时时间
timeout: "7000"
})
// 请求拦截器
instance.interceptors.request.use((config)=>{
//发请求前做的一些处理,数据转化,配置请求头,设置token,设置loading等,根据需求去添加
const token = localStorage.getItem('token')
if (token ) { // 判断是否存在token,如果存在的话,则每个http header都加上token
config.headers.authorization = `Bearer ${token}` //请求头加上token
}
return config
})
// 响应拦截器
instance.interceptors.response.use((res)=>{
//接收到响应数据并成功后的一些共有的处理,关闭loading等
//判断了一下 如果token失效 请求返回401的话 返回登录页面
// if(res.data.meta.status == 401){
// window.sessionStorage.removeItem('token')
// router.push('/login')
// }
return res
})
// 将新创建的一个axios导出
export default instance
3.封装一些方法
//在api文件夹里引入刚才创建好的request文件
import request from './request'
//在这里统一管理请求方法 ,
export function gets(url,data){
return request.get(url,{
params:data
})
}
export function posts(url,data){
return request.post(url,data)
}
export function getBanner(){
return request.get('banner')
}
4.使用
在组件中直接调用api里封装好的方法
import { gets, posts,getBanner } from '../util/api';
let { data:res } = await getBanner()
// console.log(res)