vue axios封装httpjs,接口公用配置拦截操作
程序员文章站
2022-05-11 20:17:12
做一下记录,在vue项目中配置公用的请求https,(1) 位置,在src中新建 src/utils/http.jsimport axios from 'axios' // 引用axiosimport...
做一下记录,在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 {<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,接口公用配置拦截操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。