使用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. JavaScript: 详解正则表达式之二

    在上一篇文章中我们讲了正则表达式的基本用法,接下来博主想聊聊其中的细节,今天就从正则修饰符开始吧. 正则修饰符又称为正则标记(flags),它会对正则的匹配规则做限定,进而影响匹配的最终结果.在上次的 ...

  2. nginx的stream模块和upstream模块

    nginx7层调度方式 使用upstream模块定义集群名称和节点地址 定义在server字段之外httpd字段之内 upstream staticweb { server 172.17.0.2; # ...

  3. Activity知识点详解

    Activity知识点详解 一.什么是Activity 官方解释: The Activity class is a crucial component of an Android app, and t ...

  4. 26.centos7基础学习与积累-012-文件和目录的属性

    从头开始积累centos7系统运用 大牛博客:https://blog.51cto.com/yangrong/p5 1.文件的属性(文件的信息描述): [root@python01 ~]# ls -l ...

  5. 聊聊ThreadLocal源码(基于JDK1.8)

    原文:https://cloud.tencent.com/developer/article/1333298 聊聊JDK源码中ThreadLocal的实现 主要方法: ThreadLocal的get方 ...

  6. vscode——常用插件记录

    前言 本人vscode中使用的插件列表,记录下. 列表 Auto Rename Tag 自动重命名成对的超文本标记语言/可扩展标记语言 background-cover 为vscode设置背景图片 C ...

  7. 讲解Flume

    Spark Streaming通过push模式和pull模式两种模式来集成Flume push模式:Spark Streaming端会启动一个基于Avro Socket Server的Receiver ...

  8. 性能:Transform层面

    数据处理的并行度 1.BlockRDD的分区数 (1)通过Receiver接受数据的特点决定 (2)也可以自己通过repartition设置 2.ShuffleRDD的分区数 (1)默认的分区数为sp ...

  9. 使用idea 调试java -jar xxx.jar方式启动

    今日思语:希望是什么?希望就是 你还在挣扎中... idea是一个功能强大的java开发工具,可以很方便的帮助开发人员进行开发工作. 1.有时我们通过使用java -jar xxx.jar方式启动可执 ...

  10. Otsu 类间方差法

    又称最大类间方差法.是由日本学者大津(Nobuyuki Otsu)于1979年提出的[1],是一种自适合于双峰情况的自动求取阈值的方法.又叫大津法,简称Otsu.   算法提出初衷是是按图像的灰度特性 ...