史上最も完全なaxiosツールパッケージ
7377 ワード
npmは国内の宝を洗う鏡像の方法を使います
npm axiosパッケージのインポートパッケージのポイント 統一url構成 統合apiリクエスト requestブロッキング.例えば、token等を伴う要求ヘッダ を設定する. respon(応答)ブロッキング.例えば、統合エラー処理、ページリダイレクト等 必要に応じてvueと組み合わせてグローバルなloadingアニメーションを作成するか、エラー処理 axiosをVueプラグインにカプセル化 を使用
config.js axiosデフォルト構成、ベースパス情報などを含む
axios.jsはaxiosモジュールを二次パッケージし、ブロックなどの情報を含む
api.jsリクエストインタフェース要約モジュール、すべてのAPIを集約
API user.js例
index.jsはaxiosをプラグインにカプセル化し,プラグインに従って導入する
global.jsグローバルの構成、定数と方法
main.js apiモジュールをインポートし、使用を登録し、globalモジュールをインポートし、マウント
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm axiosパッケージのインポート
cnpm install axios -save
config.js axiosデフォルト構成、ベースパス情報などを含む
import { baseUrl } from '@/utils/global'
export default {
method: 'get',
// url
baseUrl: baseUrl,
//
headers: {
'Content-Type': 'application/json;charset=UTF-8'
},
//
data: {},
//
timeout: 10000,
//
withCredentials: true,
//
responseType: 'json'
}
axios.jsはaxiosモジュールを二次パッケージし、ブロックなどの情報を含む
import axios from 'axios';
import config from './config';
import Cookies from "js-cookie";
import router from '@/router'
export default function $axios(options) {
return new Promise((resolve, reject) => {
const instance = axios.create({
baseURL: config.baseUrl,
headers: config.headers,
timeout: config.timeout,
withCredentials: config.withCredentials
})
// request
instance.interceptors.request.use(
config => {
let token = Cookies.get('token')
// token
if (token) {
config.headers.token = token
} else {
//
router.push('/login')
}
return config
},
error => {
//
console.log('request:', error)
//
if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
console.log('timeout ')
}
//
const errorInfo = error.response
console.log(errorInfo)
if (errorInfo) {
error = errorInfo.data // catch , Promise.reject
const errorStatus = errorInfo.status; // 404 403 500 ...
router.push({
path: `/error/${errorStatus}`
})
}
return Promise.reject(error) // (catch)
}
)
// response
instance.interceptors.response.use(
response => {
return response.data
},
err => {
if (err && err.response) {
switch (err.response.status) {
case 400:
err.message = ' '
break
case 401:
err.message = ' , '
break
case 403:
err.message = ' '
break
case 404:
err.message = ` : ${err.response.config.url}`
break
case 408:
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 505:
err.message = 'HTTP '
break
default:
}
}
console.error(err)
return Promise.reject(err) //
}
)
//
instance(options).then(res => {
resolve(res)
return false
}).catch(error => {
reject(error)
})
})
}
api.jsリクエストインタフェース要約モジュール、すべてのAPIを集約
/*
*
*/
import * as login from './modules/login'
import * as user from './modules/user'
import * as dept from './modules/dept'
import * as role from './modules/role'
import * as menu from './modules/menu'
import * as dict from './modules/dict'
import * as config from './modules/config'
import * as log from './modules/log'
import * as loginlog from './modules/loginlog'
//
export default {
login,
user,
dept,
role,
menu,
dict,
config,
log,
loginlog
}
API user.js例
import axios from '../axios'
/*
*
*/
//
export const save = (data) => {
return axios({
url: '/user/save',
method: 'post',
data
})
}
//
export const batchDelete = (data) => {
return axios({
url: '/user/delete',
method: 'post',
data
})
}
//
export const findPage = (data) => {
return axios({
url: '/user/findPage',
method: 'post',
data
})
}
// Excel
export const exportUserExcelFile = (data) => {
return axios({
url: '/user/exportUserExcelFile',
method: 'post',
data
})
}
//
export const findPermissions = (params) => {
return axios({
url: '/user/findPermissions',
method: 'get',
params
})
}
//
export const findByName = (params) => {
return axios({
url: '/user/findByName',
method: 'get',
params
})
}
//
export const updatePassword = (params) => {
return axios({
url: '/user/updatePassword',
method: 'get',
params
})
}
index.jsはaxiosをプラグインにカプセル化し,プラグインに従って導入する
//
import api from './api'
const install = Vue => {
if (install.installed)
return;
install.installed = true;
Object.defineProperties(Vue.prototype, {
// , Vue $api
$api: {
get() {
return api
}
}
})
}
export default install
: this.$api. .
global.jsグローバルの構成、定数と方法
/**
* 、
* Vue
* this.Global
*/
//
// export const baseUrl = 'http://139.196.87.48:8001'
export const baseUrl = 'http://localhost:8001'
//
// export const backupBaseUrl = 'http://139.196.87.48:8002'
export const backupBaseUrl = 'http://localhost:8002'
export default {
baseUrl,
backupBaseUrl
}
main.js apiモジュールをインポートし、使用を登録し、globalモジュールをインポートし、マウント
import Vue from 'vue'
import App from './App'
import router from './router'
import api from './http'
import i18n from './i18n'
import store from './store'
import global from '@/utils/global'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'font-awesome/css/font-awesome.min.css'
Vue.use(ElementUI) // Element
Vue.use(api) // API
Vue.prototype.global = global //
new Vue({
el: '#app',
i18n,
router,
store,
render: h => h(App)
})