vue封装api接口

**

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)