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


Posted in Javascript onAugust 11, 2020

做一下记录,在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,接口公用配置拦截操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
简单的前端js+ajax 购物车框架(入门篇)
Oct 29 Javascript
js实现的光标位置工具函数示例
Oct 03 Javascript
微信小程序 解析网页内容详解及实例
Feb 22 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
Feb 23 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 Javascript
在vue项目中使用md5加密的方法
Sep 14 Javascript
vue项目中使用scss的方法步骤
May 16 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 Javascript
如何通过vscode运行调试javascript代码
Jul 24 Javascript
JS获取当前时间戳方法解析
Aug 29 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 #Javascript
封装 axios+promise通用请求函数操作
Aug 11 #Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 #Javascript
vue 调用 RESTful风格接口操作
Aug 11 #Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 #Javascript
vue接口请求加密实例
Aug 11 #Javascript
vue组件暴露和.js文件暴露接口操作
Aug 11 #Javascript
You might like
JpGraph php柱状图使用介绍
2011/08/23 PHP
Yii框架登录流程分析
2014/12/03 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
requirejs + vue 项目搭建详解
2017/06/16 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
Python编码爬坑指南(必看)
2016/06/10 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
自主招生自荐信范文
2013/12/04 职场文书
综合实践教学反思
2014/01/31 职场文书
领班岗位职责范文
2014/02/06 职场文书
《草原》教学反思
2014/02/15 职场文书
大型会议策划方案
2014/05/17 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
施工安全协议书范本
2014/09/26 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
武夷山导游词
2015/02/03 职场文书
学术会议通知范文
2015/04/15 职场文书
行政处罚告知书
2015/07/01 职场文书
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android