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

https://www.jianshu.com/p/9077baa9d543

一、基於框架：vue
二、基於http庫：axios
三、基本用法：
    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; 

四、測試用例

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

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

作者：Lucia_Huang
鏈接：https://www.jianshu.com/p/9077baa9d543
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。