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