第五天：uni-app 封裝請求攔截、響應攔截

Uni-app

20200421 uni-app 封裝請求攔截、響應攔截

安裝

npm install uni-request --save

封裝方法

import uniRequest from '../uni-request/index.js';
import config from '../config/index.js' // 全局域名配置

/**
 * 提供的方法有
 * uniRequest.request(config)
 * uniRequest.get(url[, config])
 * uniRequest.delete(url[, config])
 * uniRequest.head(url[, config])
 * uniRequest.options(url[, config])
 * uniRequest.post(url[, data[, config]])
 * uniRequest.put(url[, data[, config]])
 * uniRequest.patch(url[, data[, config]])
 * 
 */

// 全局配置
uniRequest.defaults.baseURL = config.baseUrl;

// 請求攔截
uniRequest.interceptors.request.use(
	request => {
		//配置基本信息	
		return request;
	},
	err => {
		console.log('請求失敗');
		return Promise.reject(err);
	});

// 響應攔截
uniRequest.interceptors.response.use(function(response) {
	console.log('返回進入攔截成功')
	return Promise.resolve(response);
}, function(err) {
	if (err && err.response) {
		switch (err.response.status) {
		  case 301: err.message = '請求的數據具有新的位置且更改是永久的'; break
		  case 302: err.message = '請求的數據臨時具有不同 URI'; break
		  case 304: err.message = '未按預期修改文檔'; break
		  case 305: err.message = '必須通過代理來訪問請求的資源'; break
		  case 400: err.message = '請求中有語法問題，或不能滿足請求'; break
		  case 402: err.message = '所使用的模塊需要付費使用'; break
		  case 403: err.message = '當前操作沒有權限'; break
		  case 404: err.message = '服務器找不到給定的資源'; break
		  case 407: err.message = '客戶機首先必須使用代理認證自身'; break
		  case 415: err.message = '請求類型不支持，服務器拒絕服務'; break
		  case 417: err.message = '未綁定登錄賬號，請使用密碼登錄後綁定'; break
		  case 426: err.message = '用戶名不存在或密碼錯誤'; break
		  case 429: err.message = '請求過於頻繁'; break
		  case 500: err.message = '服務器內部錯誤，無法完成請求'; break
		  case 501: err.message = '服務不支持請求'; break
		  case 502: err.message = '網絡錯誤，服務器接收到上上游服務器無效響應'; break
		  case 503: err.message = '服務器無法處理請求'; break
		  case 504: err.message = '網絡請求超時'; break
		  case 999: err.message = '系統未知錯誤，請反饋給管理員'; break
		}
	} else {
		err.message = '連接服務器失敗!'
	}
	console.log(err.message)
	return Promise.reject(err);
});


export default uniRequest

main.js 引用

import Vue from 'vue'
import App from './App'
import store from './store'
import http from './utils/request'

Vue.config.productionTip = false
// 掛載全局
Vue.prototype.$http = http

App.mpType = 'app'

const app = new Vue({
    ...App,
	store
})
app.$mount()

使用

this.$http.post('/user', {
	loginname: this.loginname,
	possword: this.possword
}).then((res) => {
	console.log(res);
}).catch((err) => {
	console.log(err);
});

備註

/**

• 提供的方法有
• uniRequest.request(config)
• uniRequest.get(url[, config])
• uniRequest.delete(url[, config])
• uniRequest.head(url[, config])
• uniRequest.options(url[, config])
• uniRequest.post(url[, data[, config]])
• uniRequest.put(url[, data[, config]])
• uniRequest.patch(url[, data[, config]])

*/