vue搭建項目之設置axios


首先要下載axios:

  npm install axios -S

要注意的是,axios不支持Vue.use();這種方式,可以改寫原型鏈。

第二步就是新建axios存放位置:

  在項目中src中單獨建立一個axios的文件夾,並在main.js中引入:

  

  

第三步對axios進行封裝:

  封裝方法網上一大堆。本次封裝如下:

       在axios.js中封裝的是一些獲取數據方法,如:

  最后聲明方式:

Vue.prototype.$get = get;
Vue.prototype.$post = post;
Vue.prototype.$put = put;
Vue.prototype.$delete = remove;

  在http-status.js中設置code:

  

module.exports = function (error) {
  let message = '';
  switch (error.response.status) {
    case 400: message = '請求錯誤'; break;
    case 401: message = '未授權,請登錄'; break;
    case 403: message = '拒絕訪問'; break;
    case 404: message = '請求地址錯誤'; break;
    case 405: message = '請求方式錯誤'; break;
    case 408: message = '請求超時'; break;
    case 500: message = '服務器錯誤'; break;
    case 501: message = '服務未實現'; break;
    case 502: message = '網關錯誤'; break;
    case 503: message = '服務不可用'; break;
    case 504: message = '網關超時'; break;
    default: message = 'http版本不受支持'; break;
  }

  return message;
}

  在index.js中配置axios攔截器:

import axios from 'axios';
import status from './http-status';
import './axios';
import Vue from 'vue';

// 全局的axios默認值
axios.defaults.baseURL = process.env.BASE_URL;
axios.defaults.headers.put['Content-Type'] = 'application/json';

// 超時設置
// axios.defaults.timeout = 2500;

// 添加請求攔截器
axios.interceptors.request.use(function (config) {
  // 在發送請求之前做些什么
  return config;
}, function (error) {
  // 對請求錯誤做些什么
  return Promise.reject(error);
});
// 添加響應攔截器
axios.interceptors.response.use(function (response) {
  // 對響應數據做點什么
  let data = response.data;
  if (!data.hasOwnProperty('code')) {
    return data;
  }
  if (data.code === 0 || data.code === -1) {
    return data;
  }

  const error = new Error(data.msg || '');
  // 對請求錯誤做統一提示
  Vue.prototype.$Message.warning(error.message);
  error.data = data;
  error.response = response;

  throw error;
}, function (error) {
  // 對響應錯誤做點什么
  if (error && error.response) {
    error.message = status(error);
  }
  return Promise.reject(error);
});

  最后就可以進行操作了,代碼中有用到iview的相關組件。

當然,感謝郭大神的幫助與指導,為老鐵雙擊666。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM