vue+axios 对RESTful 请求封装

RESTful介绍 阮老师讲的蛮好的，此文章是结合我之前公司的项目来总结的
技术栈：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 => {}) 来对请求结果进行处理，这样调用的时候代码就精简了很多

总得来说，一次封装，永久收益，哈哈，体验还是不错的，restful的接口风格也是很不错。