一、基于框架：vue
二趴久、基于http庫(kù)：axios
三丸相、基本用法：
????1.通過(guò)node安裝：
npm install axios
????2. 在項(xiàng)目目錄的src文件夾下新建providers文件夾，在該文件夾內(nèi)新建http-service.js文件彼棍，內(nèi)容如下代碼塊：
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);
}
);
//響應(yīng)攔截器即異常處理
axios.interceptors.response.use(response => {
return response
}, err => {
if (err && err.response) {
switch (err.response.status) {
case 400:
console.log('錯(cuò)誤請(qǐng)求')
break;
case 401:
console.log('未授權(quán)灭忠，請(qǐng)重新登錄')
break;
case 403:
console.log('拒絕訪問(wèn)')
break;
case 404:
console.log('請(qǐng)求錯(cuò)誤,未找到該資源')
break;
case 405:
console.log('請(qǐng)求方法未允許')
break;
case 408:
console.log('請(qǐng)求超時(shí)')
break;
case 500:
console.log('服務(wù)器端出錯(cuò)')
break;
case 501:
console.log('網(wǎng)絡(luò)未實(shí)現(xiàn)')
break;
case 502:
console.log('網(wǎng)絡(luò)錯(cuò)誤')
break;
case 503:
console.log('服務(wù)不可用')
break;
case 504:
console.log('網(wǎng)絡(luò)超時(shí)')
break;
case 505:
console.log('http版本不支持該請(qǐng)求')
break;
default:
console.log(`連接錯(cuò)誤${err.response.status}`)
}
} else {
console.log('連接到服務(wù)器失敗')
}
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請(qǐng)求
* @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請(qǐng)求
* @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請(qǐng)求
* @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)
})
})
}
/**
* 下面是獲取數(shù)據(jù)的接口
*/
/**
* 測(cè)試接口
* 名稱：exam
* 參數(shù)：paramObj/null
* 方式：fetch/post/patch/put
*/
export const server = {
exam: function(paramObj){
return post('/api.php?ac=v2_djList',paramObj);
}
}
????3.在main.js內(nèi)引用以上的http-service.js文件：
import {server} from './providers/http-service'
//定義全局變量
Vue.prototype.$server=server;
四、測(cè)試用例
export default {
methods:{
exam: function(){
let paramObj = {
uid: '123456'
}
this.$server.exam(paramObj).then(data => {
console.log(data)
})
}
}
}
在網(wǎng)友們寫的封裝方法基礎(chǔ)上做了一些修改座硕，目前在自己的項(xiàng)目組件化中使用弛作，有寫的不對(duì)的地方歡迎大家留言指出~
