vue api层封装 axios封装（大厂案例）

为什么要封装axios

有一定设计思想的同学，应该会有个意识，我们前端的api层与业务层应该是分离的。
否则业务层会特别混乱，我们要实现的目标是业务层只调用方法，返回接口数据。其余的都交给api层来做。那我们具体应该怎么设计呢？

设计思路

api层：联通后台接口，进行错误统一处理（根据不同的状态码），以及成功处理。

实际操作

1.我们在src目录下新建一个request文件夹（你可以自己命名，不过名字需要按规定来，保证项目的规范化，语义化，不能瞎命名）
2.新建一个axios.js文件，用于封装axios。
3.新建一个apiUrl.js文件，用于存放所有接口，方便维护和管理。
4.新建一个common.js文件，用于封装业务层调用的各种方法。

下面来介绍每个文件应该怎么设计

axios.js

**// 引入axios**
import axios from 'axios';
**//获取token的方法**（一般存放在sessionStorage或localStorage）
function getTokenByLocal(){
    let token = sessionStorage.getItem('token') || '';
    return token
}
**//创建一个axios实例**
const service = axios.create({
    baseURL:'/apply',   //api的baseurl
    timeout:5000    //请求超时时间
})
**//设置request请求拦截器**
service.interceptors.request.use(
    config =>{
        if(getTokenByLocal()){
            config.headers['token'] = getTokenByLocal();        //让每个请求携带自定义的token
            // config.headers['ContentType'] = 'application/from-data;charset=utf-8'    //后台接收参数的类型
        }
        return config
    },
    error =>{
       //console.log(error) 
       Promise.reject(error)
    }
)

**//response响应拦截器**
service.interceptors.response.use(
    response =>{
        let res = response.data;
        //没有登陆的状态码
        if(res.code === 401){
        //跳到登录页面
            location.href = '/login';	
        }
        //其它状态码的判断
        // else if(res.code === 402){
				//do something
        // }
        return Promise.resolve(response.data)
    },
    error =>{
        //这里可以进行提示 或者弹窗
        return Promise.reject(error);
    }
)
//导出这个方法
export default service

common.js

//引入刚刚封装好的axios
import service from './axios';

//此方法耦合度很低 适用于业务中绝大部分
export default function requestOfPost(url,data){
//参数 url：接口地址  data:传给后台的参数
    return service.post(url,data);
}

apiUrl.js

const url = {
    //登录的接口
    loginUrl:'/login',
    //列表的接口
    getMenuList:'/getMenuList'

}
export default url

ok,接下来建一个文件，调取common.j定义的方法

我们在src下新建一个api文件夹
新建一个index.js

//引入common.js的方法
import requestOfPost from '../request/common'

export function postRequest(url,data){
  return new Promise((resolve,reject)=>{
  //成功处理
    requestOfPost(url,data).then(res => resolve(res))
    //失败抛出错误
    .catch(error => reject(error))
  })
}

组件使用

//引入保存所有接口的url文件
import url from '../../request/apiUrl'
//引入api.js定义的方法index
import {postRequest} from '../../api/index'

ES7的语法调用

 async login(){
     try { 
      let listData = await postRequest(url.loginUrl,params);
      //do something
     }
     //错误处理
     catch(error){
       console.log(error);
     }
   },

ES6的语法调用

postRequest(url.loginUrl,params).then(res => console.log(res))

ES6的链式调用可能会出现问题，比如.then操作两次,第二个就会报未定义，所以建议使用ES7，注意ES7 要处理好try，catch,否则报错就不会执行下面的代码，我们把它们放在catch里就好了