axoios二次封装。

引子
用vue有一年多了 项目也做了不少，有比较大的项目，也有比较小的项目
做了多了 就越感觉规范的重要性，之前做的第一个大一点的项目，因为不断的添加东西，导致有的组件过大导致维护特别麻烦（脑壳疼）
总结一下用vue开发已经经历了三个阶段了
第一个阶段 把当前组件需要的的东西都放到一个组件里，感觉找起来改起来都方便
第二个阶段 我们会有意识的把重复度高的组件或者方法单独提取出来按需引入
第三个阶段 指定规则，什么文件夹里放什么 注释的统一规范
其实我在前两个阶段做的项目因为一开始没有合理的规范，很多东西也考虑不到，导致维护很累
因为我们公司没有前端大牛 一切都是我们几个菜鸟一块商量，但是学到的东西还是蛮多

看我们现在的项目目录

image.png

这章主要讲的是 axios请求后台之前或者请求之后做的一些处理
是在axios上进行二次封装 因为这个用的比较广所以就单独拎出来一章

import axios from 'axios'
import qs from 'qs'

// create an axios instance
const service = axios.create({
  // baseURL: process.env.BASE_API, // api的base_url
  // timeout: 5000,
  headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},
  method: 'post', //一般需要用post
  transformRequest: [function (data) {
    // 对 data 进行任意转换处理
    data = qs.stringify(data)
    return data;
  }]// request timeout
})

// request interceptor  请求之前的拦截器
service.interceptors.request.use(config => {
  // Do something before request is sent
  return config
}, error => {
  // Do something with request error
  console.log(error) // for debug
  Promise.reject(error)
})

// respone interceptor 请求之后异常状态拦截
service.interceptors.response.use(
  response => {
    const res = response.data;
    if (res.statusCode === 201 || res.statusCode === 400 ||res.statusCode === 401 || res.statusCode === 403 || res.statusCode === 404) {
      return Promise.reject('error');
    } else {
      return response.data;
    }
  },
  error => {
    console.log('err' + error)// for debug
    return Promise.reject(error)
  }
)

export default service

封装组件里面的方法

import request from '@/utils/request.js'
/*
* username 用户名
* password 密码
* */
export function login(username,password) { // 获取功能权限树
  return request({
    url: '/api/v1/auth/login',
    method: 'post',
    params: {username,password}
  })
}

然后是组件里面的引用

    loginIn(){
          console.log(md(this.password))
            login(this.username,this.password).then(
              res =>{
               //.......
          this.$router.push('/Home')
        }
      )
        }

还需要注意的是main.js里面axios的路径要变成二次封装的路径
main.js

import axios from './utils/request.js'

看起来感觉挺麻烦 但是真正维护的时候 我们只需要在对应的文件夹改就好了
不用像之前在一个很大的组件里面找，而且别的地方调用只需要引入一下就好了，不用再单独写了