vue+axios 对restful 请求封装

礼拜天来公司整理项目，项目是最近开始重构的，里面的各种http请求接口是restful结构的（为了提升项目的比格），整理一下笔记

    [restful介绍][1]博主讲的很详细
    技术栈： vue + vuex + element-ui + axios

    import axios from 'axios'
    
    import store from '../vuex/store'
    import { Message } from 'element-ui'
    
    // axios 配置
    axios.defaults.timeout = 5000
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
    axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
    
    // POST传参序列化
    axios.interceptors.request.use((config) => {
      // 单个网站的admin用户
      config.headers.common['Gw-Admin-Access-Token'] = store.getters.adminAccessToken
      // 整个网点user
      config.headers.common['Gw-User-Access-Token'] = store.getters.userAccessToken
      return config
    }, (err) => {
      Message.error('参数错误')
      return Promise.reject(err)
    })
    
    // 返回状态判断
    axios.interceptors.response.use((res) => {
      const response = res.data
      if (response.msg) {
        if (response.code === 0) {
          Message.success(response.msg)
        } else {
          Message.error(response.msg)
        }
      }
      return response
    }, (err) => {
      if (err && err.response) {
        switch (err.response.status) {
          case 401:
            Message.error('未授权，请登录')
            window.location.href = '/#/auth/login'
            break
          case 404:
            Message.error('接口请求异常: ' + err.response.config.url + ', 请重试')
            break
          default:
            Message.error('Oops, 出错啦')
        }
      }
      return Promise.reject(err)
    })
    
    export default function request (method, url, data) {
      // 处理请求的url和数据
      data = method === 'get' ? { params: data } : data
      // 发送请求
      return new Promise((resolve, reject) => {
        axios[method](url, data)
          .then(response => {
            resolve(response)
          }, error => {
            reject(error)
          })
          .catch(error => {
            reject(error)
          })
      })
      .catch(error => {
        console.log(error)
      })
    }

封装好的axios请求如下：
1.在相应的api文件中定义方法（如下是goods中的删除商品分类的方法）

  delCatList (data) {
    return Request('delete', API.GOODS.GOODS_CAT + '/' + data)  //其它的操作将对应的delete换成（put、post、get、delete）即可
  },

2.在需要的vue界面调用

首先：import Goods from '@/fetch/request/goods'
methods方法： 

       Goods.addCatList(data).then(res => {
          if (res.code === 0) {
              console.log(res)
           }
       })
       
       

这里由于封装的时候将axios封装为Promise对象 ，所以可以直接使用.then(),res即为接口返回的结果，代码简介了不少

   [Promise对象--阮一峰][2]

总得来说，一次封装，永久收益，哈哈，体验还是不错的，restful的架构风格也是很不错。祝大家周末愉快，杭州下雨:(。。。。

来源：https://segmentfault.com/a/1190000016146893