vue---发送数据请求的一些列的问题
使用vue做数据请求,首先考虑的是封装请求方法request.js
import axios from 'axios'
import Qs from 'qs' // 创建一个axios实例
const service = axios.create({
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
// 'content-type': 'application/json;charset=UTF-8',
// 'x-token': 'one'
},
// baseURL: 'http://dianphp.fyz.com',
baseURL: '/',
method: 'post',
transformRequest:[function(data){
return Qs.stringify(data)
}],
withCredentials: true,
timeout: 5000
}) // 添加请求拦截器
service.interceptors.request.use(config => {
// 在发送请求之前做某事,比如说 设置token
// config.headers['token'] = 'token';
config.headers['x-token'] = 'xxxxxxxxxxxxxxxxxxx';
return config;
}, error => {
// 请求错误时做些事
return Promise.reject(error);
}); // 添加响应拦截器
service.interceptors.response.use(response => {
const res = response.data;
// // 如果返回的状态不是200 就主动报错
// if(res.state != 200){
// return Promise.reject(res.message || 'error')
// }
return res;
}, error => {
return Promise.reject(error.response.data); // 返回接口返回的错误信息
}) export default service
这里需要注意的是baseURL,不要写服务器的地址,如果这里配置服务器的地址就会报跨域的错误
这里解决跨域的问题是在 config 目录下的 dev 里面进行配置proxyTable:
proxyTable: {
'/api': {
target: 'http://dianphp.fyz.com',
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
}
}
},
其次是在开发过程中后存在OPTIONS跨域的问题,我使用的是thinkphp,可能是thinkphp的路由问题,配置的时候需要配置 options请求
return [
// 'api/user/login' => 'api/user/login',
'api/user/login' => ['api/user/login',['method' => 'post|get|options']],
];
然后请求参数里面添加 header:
public function login(){
header('Access-Control-Allow-Origin: *');
$list = $this->getlayuilist();
return $list;
}
request.js的使用方法:
1、新建 api/role.js
role.js
import request from '@/utils/request' class RoleService{
getRoutes(data){
return request({
url: '/api/user/login',
method: 'post',
})
// return request({
// url: '/api/user/login',
// method: 'post',
// data:data
// })
} getRoles() {
return request({
url: '/roles',
method: 'get'
})
} addRole(data) {
return request({
url: '/role',
method: 'post',
data
})
} updateRole(id, data) {
return request({
url: `/role/${id}`,
method: 'put',
data
})
} deleteRole(id) {
return request({
url: `/role/${id}`,
method: 'delete'
})
}
} export default new RoleService()
具体组件的使用:
import roleApi from '@/api/role'
使用方法:
roleApi.getRoutes().then(res => {
console.log(res);
console.log('请求成功');
})
vue---发送数据请求的一些列的问题的更多相关文章
- vue 发送ajax请求
一. 简介 1.vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本).axios(vue2.0版本)等插件实现 2.axios是一个基于Promise的HTTP请求客 ...
- vue中数据请求的三种方法
注意请求可能存在跨域问题,需要去配置好 这三种建议使用axios 1.resource Vue 要实现异步加载需要使用到 vue-resource 库. Vue.js 2.0 版本推荐使用 axios ...
- vue axios数据请求get、post方法的使用
我们常用的有get方法以及post方法,下面简单的介绍一下这两种请求方法 vue中使用axios方法我们先安装axios这个方法 npm install --save axios 安装之后采用按需引入 ...
- 安卓中使用OkHttp发送数据请求的两种方式(同、异步的GET、POST) 示例-- Android基础
1.首先看一下最终效果的截图,看看是不是你想要的,这个年代大家都很忙,开门见山很重要! 简要说下,点击不同按钮可以实现通过不同的方式发送OkHttp请求,并返回数据,这里请求的是网页,所以返回的都是些 ...
- vue发送ajx请求 axios
一. 简介 1.vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本).axios(vue2.0版本)等插件实现 2.axios是一个基于Promise的HTTP请求客 ...
- vue使用axios发送数据请求
本文章是基于vue-cli脚手架下开发 1.安装 npm install axios --s npm install vue-axios --s 2.使用.在index.js中(渲染App组件的那个j ...
- vue发送ajax请求
一.vue-resource 1.简介 一款vue插件,用于处理ajax请求,vue1.x时广泛应用,现不被维护. 2.使用流程 step1:安装 [命令行输入] npm install vue-re ...
- vue axios 数据请求实现
1.安装nginx npm install axios --save-dev cnpm install axios --save-dev 使用淘宝镜像 保存依赖文件到本地 装好了.packjson.j ...
- 双击td字段,出现编辑文本框(更改之后发送数据请求) jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head ...
随机推荐
- glfw之hello world
mac上用cocoa做imshow,资料似乎不好找,即便找到也需要和OC混编,而不是纯C.这不够纯粹.考虑用opengl做通用的.跨平台的imshow.先入门一下opengl,从glfw官方例子入手. ...
- SpringCloud2.0 Hystrix Dashboard 断路器指标看板 基础教程(八)
1.启动基础工程 1.1.启动[服务中心]集群,工程名称:springcloud-eureka-server 参考 SpringCloud2.0 Eureka Server 服务中心 基础教程(二) ...
- 【转载】Fiddler 抓包工具使用指北: 弱网络环境模拟限速测试流程
一:为什么要做弱网络测试? 实际的客户现场可能网络不稳定或者网速低,恶劣的网络环境会导致出现一些bug,影响用户体验甚至某些服务不可用.而公司内部的研发环境网络通常比较顺畅,难以复现这种bug.要解决 ...
- robot framework 笔记(四),使用时遇到的问题
背景: 使用rf遇到的一些问题汇总 一:跑WEBUI的时候报错: [ WARN ] Keyword 'Capture Page Screenshot' could not be run on fail ...
- 异常检测(Anomaly detection): 什么是异常检测及其一些应用
异常检测的例子: 如飞机引擎的两个特征:产生热量与振动频率,我们有m个样本画在图中如上图的叉叉所示,这时来了一个新的样本(xtest),如果它落在上面,则表示它没有问题,如果它落在下面(如上图所示), ...
- django-带参数路由
路由urls.py from django.conf.urls import url from goods.views import IndexView, DetailView, ListView u ...
- Git学习笔记--配置(二)
由之前文章,总结得出Git的特点: 最优的存储能力: 非凡性能: 开源的: 管理成本低: 很容易做备份: 支持离线操作: 很容易定制工作流程: Git is a free and open sourc ...
- Python的可变类型和不可变类型?
Python的每个对象都分为可变和不可变可变:列表.字典 不可变:数字.字符串.元组
- LeetCode 855. Exam Room
原题链接在这里:https://leetcode.com/problems/exam-room/ 题目: In an exam room, there are N seats in a single ...
- LeetCode 959. Regions Cut By Slashes
原题链接在这里:https://leetcode.com/problems/regions-cut-by-slashes/ 题目: In a N x N grid composed of 1 x 1 ...