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'

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

最后编辑于：2018.09.10 17:16:09