vue中axios使用二:axios以post,get,jsonp的方式请求后台数据
本文为博主原创,转载请注明出处
axios在上一篇中讲过:vue中axios使用一:axios做拦截器,axios是请求后台资源的模块,用来请求后台资源。
axios本身是支持get,post请求后台数据,示例如下:
post方式:
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
get方式:
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
axios不支持jsonp的方式,在网上搜寻了很多的方式,找到一个可以使用jsonp在前端跨域请求的一个方法,特此记录
axios不支持jsonp,因为axios的作者觉得jsonp不太友好,推荐用CORS方式更为干净,但是jsonp支持范围更加广阔一些,
一些老式的IE浏览器也能支持,所以有些公司还是jsonp用的多些,那么如果要使用jsonp,可以独立安装
npm i jsonp --save-dev 然后在页面中引用import jsonp from 'jsonp',使用方式也是非常简单的:
jsonp(config.ajaxUrl + '路径', null, (err, data) => {
if (err) {
console.error(err.message);
} else {
if (data.list.length > 0) {
data.list.map((item) => this.list.push(item))
console.log(data);
}
}
})
vue中axios使用二:axios以post,get,jsonp的方式请求后台数据的更多相关文章
- Vue 使用 axios post请求后台数据时 404
今天遇到Vue 使用 axios post请求后台数据时 404 使用postman 就能获取到 网上找了大半天 终于找到了解决方法,传送门:https://www.jianshu.com/p/b10 ...
- jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
- vue 请求后台数据2(copy)
https://blog.csdn.net/vergilgeekopen/article/details/68954940 需要引用vue-resource 安装请参考https://github.c ...
- 在vue中实现扫描二维码跳转页面
文字少的博文不允许发布到网站首页.文字少的博文不允许发布到网站首页.文字少的博文不允许发布到网站首页.文字少的博文不允许发布到网站首页.文字少的博文不允许发布到网站首页.文字少的博文不允许发布到网站首 ...
- vue中,写在methods里的B方法去调A方法的数据,访问不到?
今天在写项目的时候,发现了一个京城性忽略的问题,在vue的methods的方法里面定义了两个方法,如下: getTaskList() { api.growthDetails.taskList({ ap ...
- vue 请求后台数据 (copy)
https://www.cnblogs.com/calledspeed001/p/7094494.html var that=this get请求 that.$http.get("1.txt ...
- Vue中实现与后台的数据交换(vue-resource)
vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.(但是目前它已经停止更新了) 1.在vue中安装vue-resource插件 打 ...
- vue中axios使用封装
一.在main.js导入 // 引入axios,并加到原型链中 import axios from 'axios'; Vue.prototype.$axios = axios; import QS f ...
- Vue(项目踩坑)_解决vue中axios请求跨域的问题
一.前言 今天在做项目的时候发现axios不能请求跨域接口 二.主要内容 1.之前直接用get方式请求聚合数据里的接口报错如下 2.当前请求的代码 3.解决方法 (1)在项目目录中依次找到:confi ...
随机推荐
- python之路第四天
2018年7月17日 python开发IDE: pycharm.eclipse # 专业版 # 不要汉化 安装:去官网下载pycharm 注册:https://blog.csdn. ...
- z = z*z + c的分型图如何画
使用python的图形库. 环境:conda+jupyter notebook 代码如下: import numpy as np from PIL import Image from numba im ...
- Beyond Compare设置自定义过滤
Beyond Compare是一款优秀的专业级文件比较软件,利用它可以快速比较出文件之间的差异,以便于修改.整合.其中较强大的功能之一就是文件夹比较,面对海量的子文件夹以及文件,Beyond Comp ...
- Window下安装Nignx并且使用文档
1.下载nignx http://nginx.org/en/download.html 下载稳定版本,以nginx/Windows-1.12.2为例,直接下载 nginx-1.12.2 ...
- 使用idea创建项目如何忽略iml文件
在图中圈出的输入栏中输入“*.iml;”,点下OK就可以了,如图进入idea项目窗口,如图 点下file,进入file菜单窗口,如图 点下settings,进入到settings窗口,如图 在输入框f ...
- CSS float 父元素高度自适应
<html> <head><title></title><style type="text/css">*{margin: ...
- 11、Python函数基础(定义函数、函数参数、匿名函数)
函数先定义函数,后调用 一.定义函数: 1.简单的规则: 函数代码块以 def 关键词开头,后接函数标识符名称和圆括号 (). 任何传入参数和自变量必须放在圆括号中间,圆括号之间可以用于定义参数. 函 ...
- typename T::SubType * ptr;
#include <iostream> using namespace std; template<class T> class MyClass{ public: typena ...
- vscode React编程配置
2.添加RN开发插件 React Native Tools:微软官方出的ReactNative插件,非常好用Reactjs code snippets:react的代码提示,如componentWil ...
- Redis : REmote DIctionary Server
REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统. Redis是一个开源的使用ANSI C语言编写.遵守B ...