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的架構風格也是很不錯。祝你們週末愉快，杭州下雨:(。。。。