安裝依賴
安裝axios
npm i axios
安裝qs
npm i qs
封裝
【utils/request.js】
import axios from 'axios' // 引入axios
import qs from 'qs' // 引入qs
axios.defaults.baseURL = '/apis' //請(qǐng)求地址的域名（此處使用了代理所以直接填／apis
// 攔截響應(yīng)response，進(jìn)行錯(cuò)誤處理
axios.interceptors.response.use(function (response) {
? // 成功處理
? return response;
}, function (error) {
? // 失敗處理
? error.code = error.response.status
? switch (error.response.status) {
? ? case 400: error.message = '錯(cuò)誤請(qǐng)求'
? ? ? break;
? ? case 401: error.message = '未授權(quán)，請(qǐng)重新登錄'
? ? ? break;
? ? case 403: error.message = '拒絕訪問'
? ? ? break;
? ? case 404: error.message = '請(qǐng)求錯(cuò)誤,未找到該資源'
? ? ? break;
? ? case 405: error.message = '請(qǐng)求方法未允許'
? ? ? break;
? ? case 408: error.message = '請(qǐng)求超時(shí)'
? ? ? break;
? ? case 500: error.message = '服務(wù)器端出錯(cuò)'
? ? ? break;
? ? case 501: error.message = '網(wǎng)絡(luò)未實(shí)現(xiàn)'
? ? ? break;
? ? case 502: error.message = '網(wǎng)絡(luò)錯(cuò)誤'
? ? ? break;
? ? case 503: error.message = '服務(wù)不可用'
? ? ? break;
? ? case 504: error.message = '網(wǎng)絡(luò)超時(shí)'
? ? ? break;
? ? case 505: error.message = 'http版本不支持該請(qǐng)求'
? ? ? break;
? ? default: error.message = `連接錯(cuò)誤${error.response.status}`
? }
? return Promise.reject(error);
});
async function request(options) {
// 這里主要是post方法的封裝，get方法同理
? options.method = 'post'
? if (options.config === 'formData') {
? ? options.headers = {'Content-Type': 'multipart/form-data'}
? } else {
? ? options.data = qs.stringify(options.data)
? }
? return new Promise((resolve,reject) => {
? ? axios(options).then(res => {
? ? //? 這里主要根據(jù)后來返回的數(shù)據(jù)作判斷，請(qǐng)根據(jù)實(shí)際情況
? ? ? if(res.data.status === 0) {
? ? ? ? resolve(res.data)
? ? ? } else {
? ? ? ? this.$message.error(`status: ${res.data.status}, message: ${ res.data.message }`)
? ? ? ? reject(res.data)
? ? ? }
? ? }).catch(error => {
? ? // 顯示攔截器對(duì)respone處理后的可讀錯(cuò)誤
? ? ? this.$message.error(`${error.code} : ${ error.message }`)
? ? })
? })
}
export default { request }
使用
【main.js】
// ...
import Request from '@/utils/require' // 引入封裝的文件
const { request } = Request
Vue.prototype.$request = request // 掛載到全局上
// ...
【src/pages/index.vue】
<template></template>
<script type="text/ecmascript-6">
export default {
// 頁面打開后所作請(qǐng)求
mounted () {
this.$request({
url: '/XX',
data: {}
}).then(res => {
// do something
})
}
}
</script>
<style></styles>
