使用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---发送数据请求的一些列的问题的更多相关文章

  1. vue 发送ajax请求

    一. 简介 1.vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本).axios(vue2.0版本)等插件实现 2.axios是一个基于Promise的HTTP请求客 ...

  2. vue中数据请求的三种方法

    注意请求可能存在跨域问题,需要去配置好 这三种建议使用axios 1.resource Vue 要实现异步加载需要使用到 vue-resource 库. Vue.js 2.0 版本推荐使用 axios ...

  3. vue axios数据请求get、post方法的使用

    我们常用的有get方法以及post方法,下面简单的介绍一下这两种请求方法 vue中使用axios方法我们先安装axios这个方法 npm install --save axios 安装之后采用按需引入 ...

  4. 安卓中使用OkHttp发送数据请求的两种方式(同、异步的GET、POST) 示例-- Android基础

    1.首先看一下最终效果的截图,看看是不是你想要的,这个年代大家都很忙,开门见山很重要! 简要说下,点击不同按钮可以实现通过不同的方式发送OkHttp请求,并返回数据,这里请求的是网页,所以返回的都是些 ...

  5. vue发送ajx请求 axios

    一. 简介 1.vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本).axios(vue2.0版本)等插件实现 2.axios是一个基于Promise的HTTP请求客 ...

  6. vue使用axios发送数据请求

    本文章是基于vue-cli脚手架下开发 1.安装 npm install axios --s npm install vue-axios --s 2.使用.在index.js中(渲染App组件的那个j ...

  7. vue发送ajax请求

    一.vue-resource 1.简介 一款vue插件,用于处理ajax请求,vue1.x时广泛应用,现不被维护. 2.使用流程 step1:安装 [命令行输入] npm install vue-re ...

  8. vue axios 数据请求实现

    1.安装nginx npm install axios --save-dev cnpm install axios --save-dev 使用淘宝镜像 保存依赖文件到本地 装好了.packjson.j ...

  9. 双击td字段,出现编辑文本框(更改之后发送数据请求) jsp

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head ...

随机推荐

  1. glfw之hello world

    mac上用cocoa做imshow,资料似乎不好找,即便找到也需要和OC混编,而不是纯C.这不够纯粹.考虑用opengl做通用的.跨平台的imshow.先入门一下opengl,从glfw官方例子入手. ...

  2. SpringCloud2.0 Hystrix Dashboard 断路器指标看板 基础教程(八)

    1.启动基础工程 1.1.启动[服务中心]集群,工程名称:springcloud-eureka-server 参考 SpringCloud2.0 Eureka Server 服务中心 基础教程(二) ...

  3. 【转载】Fiddler 抓包工具使用指北: 弱网络环境模拟限速测试流程

    一:为什么要做弱网络测试? 实际的客户现场可能网络不稳定或者网速低,恶劣的网络环境会导致出现一些bug,影响用户体验甚至某些服务不可用.而公司内部的研发环境网络通常比较顺畅,难以复现这种bug.要解决 ...

  4. robot framework 笔记(四),使用时遇到的问题

    背景: 使用rf遇到的一些问题汇总 一:跑WEBUI的时候报错: [ WARN ] Keyword 'Capture Page Screenshot' could not be run on fail ...

  5. 异常检测(Anomaly detection): 什么是异常检测及其一些应用

    异常检测的例子: 如飞机引擎的两个特征:产生热量与振动频率,我们有m个样本画在图中如上图的叉叉所示,这时来了一个新的样本(xtest),如果它落在上面,则表示它没有问题,如果它落在下面(如上图所示), ...

  6. django-带参数路由

    路由urls.py from django.conf.urls import url from goods.views import IndexView, DetailView, ListView u ...

  7. Git学习笔记--配置(二)

    由之前文章,总结得出Git的特点: 最优的存储能力: 非凡性能: 开源的: 管理成本低: 很容易做备份: 支持离线操作: 很容易定制工作流程: Git is a free and open sourc ...

  8. Python的可变类型和不可变类型?

    Python的每个对象都分为可变和不可变可变:列表.字典   不可变:数字.字符串.元组

  9. LeetCode 855. Exam Room

    原题链接在这里:https://leetcode.com/problems/exam-room/ 题目: In an exam room, there are N seats in a single ...

  10. 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 ...