Vue: axios 请求封装及设置默认域名前缀 (for Vue 2.0)
1. 实现效果
以get方法向http://192.168.32.12:8080/users 发起请求、获取数据并进行处理
this.apiGet('/users', {})
.then((res) => {
console.log(res)
}, (err) => {
console.log(err)
})
2. 实现步骤一之配置域名前缀
2.1 安装axios
cnpm install axios --save
2.2 配置webpack.base.conf.js 文件
引入
const webpack = require('webpack')
在项目根目录下的build 中可以找到webpack.base.conf.js 文件,对文件中的内容进行以下两项操作:
在module.exports之前插入代码
// define the different HOST between development and production environment
var DEV_HOST = JSON.stringify('http://192.168.32.12:8080')
var PUB_HOST = JSON.stringify('http://{部署服务器ip和端口}')
在module.exports 中添加与entry、output、resolve等选项并列的plutins选项
plugins: [
new webpack.DefinePlugin({
HOST: process.env.NODE_ENV === 'production' ? PUB_HOST : DEV_HOST
})
2.3 配置main.js 文件
import axios from 'axios'
axios.defaults.baseURL = HOST
window.axios = axios
window.HOST = HOST const bus = new Vue()
window.bus = bus
3. 实现步骤二之封装axios
3.1 新建http.js 文件, static下边新建 js 文件夹
const apiMethods = {
methods: {
apiGet(url, data) {
return new Promise((resolve, reject) => {
axios.get(url, data).then((response) => {
resolve(response.data)
}, (response) => {
reject(response)
console.log(response)
bus.$message({
message: '请求超时,请检查网络',
type: 'warning'
})
})
})
},
apiPost(url, data) {
return new Promise((resolve, reject) => {
axios.post(url, data, {
headers: {
'Content-Type': 'application/json'
}
}).then((response) => {
resolve(response.data)
}).catch((response) => {
console.log('f', response)
resolve(response)
bus.$message({
message: '请求超时,请检查网络',
type: 'warning'
})
})
})
}
}
} export default apiMethods
3.2 文件引入
在需要发送ajax的请求文件中引入http.js
import http from '../../../../static/js/http.js'
并在该文件的export default 末尾添加选项
mixins: [http]
3.3 方法调用
this.apiGet('/index.php/api/v1/goods/list', {
params: {
property_name: '秒杀'
}
})
.then((res) => {
if(res.code == ){
this.hotListDate = res.result;
}else{
this.$message.error(res.message);
}
}, (err) => {
console.log(err)
});
post
this.apiPost('/index.php/api/v1/user/login', {
mobile : this.form.phone,
password : this.form.password
})
.then((res) => {
if(res.code == ){ }else{
this.$message.error(res.message);
}
}, (err) => {
console.log(err)
});
Vue: axios 请求封装及设置默认域名前缀 (for Vue 2.0)的更多相关文章
- VUE axios请求 封装 get post Http
创建httpService.js 文件 import axios from 'axios'; import { Loading , Message } from 'element-ui'; impor ...
- vue axios 请求带token设置
API axios.js import axios from "axios"; let AUTH_TOKEN=(function(){ return localStorage.ge ...
- vue axios 请求本地接口端口不一致出现跨域设置代理
首先在config下面的index.js,设置跨域代理 在axios请求的时候 用'/api/' 替代baseURL 最重要的就是设置完必须重新 npm run dev 否则不生效
- Vue Axios 的封装使用
目录 Axios 说明 安装 Axios 请求配置 响应结构 常用请求方法 默认值配置 全局的 请求配置项 自定义实例默认值 配置的优先顺序 拦截器 个人完整 axios 配置 Axios 说明 Ax ...
- axios请求封装和异常统一处理
前端网络请求封装前端采用了axios来处理网络请求,为了避免在每次请求时都去判断各种各样的网络情况,比如连接超时.服务器内部错误.权限不足等等不一而足,我对axios进行了简单的封装,这里主要使用了a ...
- vue axios接口封装、Promise封装、简单的axios方法封装、vue接口方法封装、vue post、get、patch、put方法封装
相信大家在做前后端数据交互的时候都会给请求做一些简单的封装就像之前封装ajax方法一样axios的封装也是一样的简单下面这个就是封装的axios的方法,require.js import axios ...
- 10. vue axios 请求未完成时路由跳转报错问题
axios 请求未完成时路由跳转报错问题 前两天项目基本功能算是完成了,在公司测试时遇到了遇到了一个问题,那就是在请求未完成时进行路由跳转时会报错,想了几种办法来解决,例如加loading,请求拦截, ...
- vue axios请求/响应拦截器
// main.js中配置 // 引入 axios import Axios from 'axios' // 这时候如果在其它的组件中,是无法使用 axios 命令的. // 但如果将 axios 改 ...
- vue axios 请求 https 的特殊处理
最近遇到自签发的CA证书,在前端axios请求https请求时,无法自动加载证书. 解决方法:将无法加载的请求在浏览器新窗口手动加载,选择继续连接. 重新加载,问题解决. 根本原因:因为自签发证书,浏 ...
随机推荐
- 激活Windows
额外的启动参数(键):/win=act – 在隐藏模式下运行程序,激活 Windows 并退出程序./ofs=act – 在隐藏模式下运行程序,激活 Office 并退出程序./wingvlk – 在 ...
- LINUX 内核内存管理
https://linux-mm.org/ http://www.cnblogs.com/liloke/archive/2011/11/20/2255737.html
- HTMLParser in python
You can know form the name that the HTMLParser is something used to parse HTML files. In python, th ...
- MySql解压版使用
1.解压 2.配置环境变量 3.新建空目录data,修改ini配置文件,修改basedir和datadir 4.管理员运行cmd,进入bin目录 5.mysql -install,如果提示错误,先my ...
- 数据结构之---C语言实现最短路径之Dijkstra(迪杰斯特拉)算法
此处共同拥有两段代码: 一. 这段代码比較全面,当中參考了github上的相关源代码. 能够说功能强大. //Dijkstra(迪杰斯特拉算法) #include <stdio.h> #i ...
- 使用memcachedclientXmemcached与Spring整合
1 简单介绍 Xmemcached是一个高性能的基于java nio的memcachedclient.在经过三个RC版本号后.正式公布1.10-final版本号. xmemcached特性一览: 1. ...
- STL源代码剖析 容器 stl_stack.h
本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie stack ---------------------------------------- ...
- springboot-quartz 实现动态添加,修改,删除,暂停,恢复等功能
任务相关信息:springboot-quartz普通任务与可传参任务 一.任务实体类 package cloud.app.prod.home.quartz; import java.io.Serial ...
- Coursera Algorithms week2 基础排序 练习测验: Dutch national flag 荷兰国旗问题算法
第二周课程的Elementray Sorts部分练习测验Interview Questions的第3题荷兰国旗问题很有意思.题目的原文描述如下: Dutch national flag. Given ...
- Blue Jeans(串)
http://poj.org/problem?id=3080 寻找最长公共子串..暴搜的.. #include<stdio.h> #include<string.h> int ...