Vue-axios 在vue cli中封裝

common/post.js

import axios from 'axios' // 引入axios
import qs from 'qs' // 引入qs
axios.defaults.baseURL = '/apis' //請求地址的域名（此處使用了代理所以直接填／apis

// 攔截響應response，進行錯誤處理
axios.interceptors.response.use(function (response) {
  // 成功處理
  // code處理
  response.code = response.data.code
  switch (response.status) {
      case 200:
        break;
    case 400: response.data.msg = '錯誤請求'
      break;
    case 401: response.data.msg = '未授權，請重新登錄'
      break;
    case 403: response.data.msg = '拒絕訪問'
      break;
    case 404: response.data.msg = '請求錯誤,未找到該資源'
      break;
    case 405: response.data.msg = '請求方法未允許'
      break;
    case 408: response.data.msg = '請求超時'
      break;
    case 500: response.data.msg = '服務器端出錯'
      break;
    case 501: response.data.msg = '網絡未實現'
      break;
    case 502: response.data.msg = '網絡錯誤'
      break;
    case 503: response.data.msg = '服務不可用'
      break;
    case 504: response.data.msg = '網絡超時'
      break;
    case 505: response.data.msg = 'http版本不支持該請求'
      break;
  }
     return response;
}, function (error) {
  
  return Promise.reject(error);
});

async function requestGet(options) {
// 這里主要是post方法的封裝，get方法同理
  options.method = 'post'
  if (options.config === 'formData') {
    options.headers = {'Content-Type': 'multipart/form-data'}
  } else {
    options.data = qs.stringify(options.data)
  }
  return new Promise((resolve,reject) => {
    axios(options).then(res => {
    //  這里主要根據后來返回的數據作判斷，請根據實際情況
      if(res.data.code == '200') {
        resolve(res.data)
      } else {
        reject(res.data)
      }
    }).catch(error => {
    // 顯示攔截器對respone處理后的可讀錯誤
      console.log(error)
    })
  })
}

export default { requestGet }

main.js

import Post from '../static/js/post.js'/*post公共*/

const { requestPost } = Post/*post*/

Vue.prototype.$requestPost = requestPost // post掛載到全局上

頁面中：

acceptlist(){
                   this.$requestGet({
                    url: this.http+'/cdk/paperTypeMobile/findList',
                    data: {}
                }).then(res => {
                    console.log(res)
                    this.columns=res.obj
                }).catch(err=>{
                    console.log(err)
                })
               }

注:main.js和post.js中要引入axios、qs