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 相关文章推荐
jquery multiSelect 多选下拉框
Jul 09 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
Apr 26 Javascript
JavaScript对内存分配及管理机制详细解析
Nov 11 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
Apr 10 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
Aug 11 Javascript
javascript中sort() 方法使用详解
Aug 30 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
May 07 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 Javascript
vuex实现数据状态持久化
Nov 11 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
删除无限级目录与文件代码共享
2006/07/12 PHP
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
Thinkphp5结合layer弹窗定制操作结果页面
2017/07/07 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
通过修改referer下载文件的方法
2008/05/11 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
js动态生成form 并用ajax方式提交的实现方法
2016/09/09 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
详解Webpack4多页应用打包方案
2020/07/16 Javascript
Python生成随机密码
2015/03/10 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
Anaconda入门使用总结
2018/04/05 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
会计电算化专业个人的自我评价
2013/11/24 职场文书
小学校园活动策划
2014/01/30 职场文书
创新社会管理心得体会
2014/09/12 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
拾金不昧感谢信
2015/01/21 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
教你用Python matplotlib库制作简单的动画
2021/06/11 Python
浅谈Python数学建模之线性规划
2021/06/23 Python
HTML+JS实现在线朗读器
2022/02/15 Javascript