vue axios封裝httpjs,接口公用配置攔截操作
做一下記錄，在vue項目中配置公用的請求https,
(1) 位置，在src中新建 src/utils/http.js
import axios from ’axios’ // 引用axiosimport { MessageBox, Message } from ’element-ui’import Qs from ’qs’ //引入數據格式化import router from ’@/router’ // axios 配置axios.defaults.timeout = 50000 //設置接口響應時間// axios.defaults.baseURL = ’https://easy-mock.com/mock/’ // 這是調用數據接口,公共接口url+調用接口名let httpUrl = window.location.hostif (httpUrl.indexOf(’.com’) !== -1) { console.log(’生產環境’, httpUrl)} else if (httpUrl.indexOf(’.net’) !== -1) { console.log(’測試環境’, httpUrl) axios.defaults.baseURL = ’http://www.test.com’ // 這是調用數據接口,公共接口url+調用接口名} else if (httpUrl.indexOf(’localhost:8088’) !== -1) { console.log(’指定開發環境’, httpUrl) axios.defaults.baseURL = ’http://localhost:8088/’} else { console.log(’開發環境’, httpUrl) axios.defaults.baseURL = ’http://192.168.6.138:8080/’ // 這是調用數據接口,公共接口url+調用接口名} // http request 攔截器，通過這個，我們就可以把Cookie傳到后臺axios.interceptors.request.use( config => { if (config.method == 'post') { // console.log(’請求路徑’, config.url) if (config.url === ’/b/login/checkLogin’) { config.headers = { ’Content-Type’: ’application/x-www-form-urlencoded’ // 設置跨域頭部 } config.data = Qs.stringify(config.data) } else if (config.url === ’/b/carModel/createCarModelVersion’) { // 此處設置文件上傳，配置單獨請求頭 config.headers = { ’Content-Type’: ’multipart/form-data’ } } else { let userInfo = localStorage.getItem(’userInfo’) if (userInfo === null) { return null } let bToken = localStorage.getItem(’btoken’) if (bToken === null) { } else { config.data.vwToken = bToken } config.headers = { ’Content-Type’: ’application/x-www-form-urlencoded’ // 設置跨域頭部 } config.data = Qs.stringify(config.data) }}else{console.log('get請求')} return config }, err => { return Promise.reject(err) }) // http response 攔截器axios.interceptors.response.use( response => { // console.log(’請求攔截返回參數’, response) if (response.status === 200) { // 成功 let returnCode = response.data.code if (returnCode > 10000 && returnCode < 20000) { // console.log(’成功’, response) Message.success(response.data.msg) } else if (returnCode >= 20000 && returnCode < 30000) { // 只彈窗，不操作 // console.log(’失敗1’, response) Message.error(response.data.msg) } else if (returnCode >= 30000 && returnCode < 40000) { // 只彈窗，點擊跳到登入頁 localStorage.removeItem(’userInfo’) MessageBox.confirm(response.data.msg, ’確定登出’, { confirmButtonText: ’重新登錄’, cancelButtonText: ’取消’, type: ’warning’ }).then(() => { // console.log(’此處應退出登錄 重新實例化’) router.push({ path: ’/login’ }) }) } } return response }, error => { // console.log(’error’, error.toString()) if ( error.toString().trim() === 'TypeError: Cannot read property ’cancelToken’ of null' ) { localStorage.removeItem(’userInfo’) MessageBox.confirm( ’會話憑證失效，可以取消繼續留在該頁面，或者重新登錄’, ’確定登出’, { confirmButtonText: ’重新登錄’, cancelButtonText: ’取消’, type: ’warning’ } ).then(() => { // console.log(’此處應退出登錄 重新實例化’) router.push({ path: ’/login’ }) }) } // console.log(error.toString().trim()) if (error.toString().trim() === ’Error: Network Error’) { MessageBox.alert(’網絡請求異常，請稍后重試’, ’出錯了’, { confirmButtonText: ’確定’, callback: action => {} }) } return Promise.reject(error.response.data) }) export default axios /** * fetch 請求方法 * @param url * @param params * @returns {Promise} */export function get(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 => { // console.log(response.data.code) 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) } ) })}
(2) 在main.js中引入調用，定義全局
import axios from ’axios’import { post, get, patch, put } from ’./utils/http’ // 將axios添加到原型鏈上Vue.prototype.$axios = axios // 定義全局變量Vue.prototype.$post = postVue.prototype.$get = getVue.prototype.$patch = patchVue.prototype.$put = put
（3）在需要用到的.vue頁面直接使用
//this.logForm 為傳參 this.logForm = { id: this.selectId, knowledgeVersionId: this.baseValue }this.$post(’你的url’, this.logForm).then(req => { this.logList = req.data this.logList.allCount = req.allCount this.logList.nowPage = req.nowPage this.logList.pageSize = req.pageSize this.loading = false }).catch(err => { console.log(err) }) this.$post(’/b/checkConfig/updateRelateKnowledge’, { id: this.selectId, knowledgeVersionId: this.baseValue }).then(req => { console.log(req) if (req.code === 10000) { // this.options = req.data this.getConfigList() } }).catch(err => { console.log(err) })
補充知識：Vue項目關于axios的二次封裝service
一、安裝axios:npm i axios --save
二、在src目錄下新建文件service.js
三、在service.js文件中寫入以下代碼
import axios from ’axios’// 創建一個擁有通用配置的axios實例,實例中的配置內容根據實際開發需求而定export const service = axios.create({ baseURL: ’http://***.***.*.**:8080/’, // 測試環境 timeout: 1000 * 10, // 請求超時的毫秒數,如果請求花費超過timeout的時間,請求將被中斷 withCredentials: true, // 表示跨域請求時是否需要使用憑證,默認fasle headers: { ’Cache-Control’: ’no-cache’ } // 不允許緩存，需要重新獲取請求})// 添加請求攔截器service.interceptors.request.use(config => { // 在發送請求之前做些什么 return config}, error => { // 對請求錯誤做些什么 return Promise.reject(error)})// 添加響應攔截器axios.interceptors.response.use(response => { // 對響應數據做點什么 return response}, error => { // 對響應錯誤做點什么 return Promise.reject(error)})
以上是對axios的初步封裝，具體功能根據實際需求在service.js文件中進行配置
四、全局使用使用service(也可以局部使用,稍后會說明局部使用方法)
第一步：在main.js中進行掛載
import { service } from ’./service’
Vue.prototype.service = service
第二步：使用
// 注意：這里必須要使用async 和 await ，不然請求狀態一直是Promise {<pending>},拿不到請求數據 async created () { let data = await this.service.get(’menu/user/tree’) console.log(data) //此時能拿到請求的數據 }
五、局部使用service,在組件內先引入再使用
<script>import { service } from ’../service’export default { name: ’HelloWorld’, data () { return { msg: ’sds’ } }, async created () { let data = await service.get(’menu/user/tree’) console.log(data) }}</script>
以上這篇vue axios封裝httpjs,接口公用配置攔截操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。
網公網安備