vue中对axios进行封装
2018-12-27 07:41:50来源:博客园 阅读 ()
在刚结束的项目中对axios进行了实践(好不容易碰上一个不是jsonp的项目),
以下为在项目中对axios的封装,仅封装了post方法,因为项目中只用到了post,如有需要请自行进行修改
src/config.js
//api接口前缀 export const apiBaseUrl = 'http://xxx.xxx.xxx.xxx:8888/test/'
src/axios.js
import axios from 'axios' import qs from 'qs' import { apiBaseUrl } from './config.js' //请求拦截器 axios.interceptors.request.use(function (param) { return param }, function (error) { // 请求错误 return Promise.reject(error) }) // 添加响应拦截器 axios.interceptors.response.use(function (response) { return response.data }, function (error) { // 响应错误 return Promise.reject(error) }) // 封装axios-------------------------------------------------------------------------------------- function apiAxios(url, params) { let httpDefault = { method: "POST", baseURL: apiBaseUrl, url: url, data: qs.stringify(params), } return new Promise((resolve, reject) => { axios(httpDefault) // 此处的.then属于axios .then((res) => { resolve(res) }).catch((response) => { reject(response) }) }) } export default { install: function (Vue) { Vue.prototype.$axios = (url, params) => apiAxios(url, params) } }
src/main.js
import axios from "@/axios.js"
Vue.use(axios)
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- vue.js开发环境搭建教程 2020-03-16
- Vue input控件通过value绑定动态属性及修饰符的方法 2020-03-05
- 详解Webstorm 新建.vue文件支持高亮vue语法和es6语法 2020-02-07
- vue路由跳转时判断用户是否登录功能的实现 2020-01-17
- vue-cli中打包图片路径错误的解决方法 2020-01-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash