vue：axios二次封裝，接口統一存放

1、基於框架：vue
2、基於http庫：axios
3、基本用法：
    1.經過node安裝：

npm install axios

    2. 在項目目錄的src文件夾下新建providers文件夾，在該文件夾內新建http-service.js文件，內容以下代碼塊： 

import axios from 'axios';

axios.defaults.timeout = 5000;
axios.defaults.baseURL ='http://www.baidu.com'; //填寫域名

//http request 攔截器
axios.interceptors.request.use(
  config => {
    config.data = JSON.stringify(config.data);
    config.headers = {
      'Content-Type':'application/x-www-form-urlencoded'
    }
    return config;
  },
  error => {
    return Promise.reject(err);
  }
);

//響應攔截器即異常處理
axios.interceptors.response.use(response => {
    return response
}, err => {
    if (err && err.response) {
      switch (err.response.status) {
        case 400:
            console.log('錯誤請求')
          break;
        case 401:
            console.log('未受權，請從新登陸')
          break;
        case 403:
          console.log('拒絕訪問')
          break;
        case 404:
          console.log('請求錯誤,未找到該資源')
          break;
        case 405:
          console.log('請求方法未容許')
          break;
        case 408:
          console.log('請求超時')
          break;
        case 500:
          console.log('服務器端出錯')
          break;
        case 501:
          console.log('網絡未實現')
          break;
        case 502:
          console.log('網絡錯誤')
          break;
        case 503:
          console.log('服務不可用')
          break;
        case 504:
          console.log('網絡超時')
          break;
        case 505:
          console.log('http版本不支持該請求')
          break;
        default:
          console.log(`鏈接錯誤${err.response.status}`)
      }
    } else {
      console.log('鏈接到服務器失敗')
    }
    return Promise.resolve(err.response)
})


/**
 * 封裝get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

export function fetch(url,params={}){
  return new Promise((resolve,reject) => {
    axios.get(url,{
      params:params
    })
    .then(response => {
      resolve(response.data);
    })
    .catch(err => {
      reject(err)
    })
  })
}


/**
 * 封裝post請求
 * @param url
 * @param data
 * @returns {Promise}
 */

 export function post(url,data = {}){
   return new Promise((resolve,reject) => {
     axios.post(url,data)
          .then(response => {
            resolve(response.data);
          },err => {
            reject(err)
          })
   })
 }

 /**
 * 封裝patch請求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function patch(url,data = {}){
  return new Promise((resolve,reject) => {
    axios.patch(url,data)
         .then(response => {
           resolve(response.data);
         },err => {
           reject(err)
         })
  })
}

 /**
 * 封裝put請求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function put(url,data = {}){
  return new Promise((resolve,reject) => {
    axios.put(url,data)
         .then(response => {
           resolve(response.data);
         },err => {
           reject(err)
         })
  })
}

/**
* 下面是獲取數據的接口
*/
/** 
* 測試接口
* 名稱：exam
* 參數：paramObj/null
* 方式：fetch/post/patch/put
*/
export const server = {
    exam: function(paramObj){
        return post('/api.php?ac=v2_djList',paramObj);
    }
}

     3.在main.js內引用以上的http-service.js文件：

import {server} from './providers/http-service'

//定義全局變量
Vue.prototype.$server=server;

4、測試用例

export default {
  methods:{  
    exam: function(){
      let paramObj = {
        uid: '123456'
      }
      this.$server.exam(paramObj).then(data => {
        console.log(data)
      })
    }
  }
}

 在網友們寫的封裝方法基礎上作了一些修改，目前在本身的項目組件化中使用，有寫的不對的地方歡迎你們留言指出~

 

 

想學前端的小夥伴，能夠關注+私信回覆《資料》免費獲取哦~

感謝您的閱讀！喜歡的能夠收藏轉發哦~