axios create拦截_vue axios封装httpjs,接口公用配置拦截操作

做一下记录，在vue项目中配置公用的请求https,

(1) 位置，在src中新建 src/utils/http.js

import axios from 'axios' // 引用axios

import { 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.host

if (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 = post

Vue.prototype.$get = get

Vue.prototype.$patch = patch

Vue.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 {},拿不到请求数据

async created () {

let data = await this.service.get('menu/user/tree')

console.log(data) //此时能拿到请求的数据

}

五、局部使用service,在组件内先引入再使用

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)

}

}

以上这篇vue axios封装httpjs,接口公用配置拦截操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。