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 ...
随机推荐
- MySQL添加用户、为用户分配权限
登录MySQL登录本地用户 mysql -u root -p登录外网用户(需要注意服务器可能只允许本地登录,需要修改响应的配置文件) mysql -u zhrt -h 10.64.6.4 -p添加用户 ...
- springboot异常处理方式
一.异常处理思路 异常捕获的是unchecked型异常,因为checked异常在代码中年已经处理过,当然是在使用try-catch处理.这里首先使用ExceptionHandler捕获全局异常,这样如 ...
- Django rest framework 之版本
一.通过 QueryParameterVersioning 获取版本 通过 QueryParameterVersioning 从 get 请求中获取版本信息: 1.新建 app,名为 api,Proj ...
- (三)MongoDB增、删、改、查
(三)MongoDB增.删.改.查 mongodb 2018年03月07日 09时31分40秒 插入基础 查询 基础查询find().findOne() 指定返回的字段 关系查询 逻辑运算 复杂数据的 ...
- JFrog杰蛙DevOps平台
https://www.jfrog.com/confluence/display/XRAY/Welcome+to+JFrog+Xray
- dfs 之 下一个排列
52. 下一个排列 中文English 给定一个整数数组来表示排列,找出其之后的一个排列. Example 例1: 输入:[1] 输出:[1] 例2: 输入:[1,3,2,3] 输出:[1,3,3,2 ...
- 在kubernetes集群中部署ElasticSearch集群--ECK
Elastic Cloud on Kubernetes (ECK) ---ECK是这个说法哈. 基本于k8s operator的官方实现. URL: https://www.elastic.co/gu ...
- python基础语法12 内置模块 json,pickle,collections,openpyxl模块
json模块 json模块: 是一个序列化模块. json: 是一个 “第三方” 的特殊数据格式. 可以将python数据类型 ----> json数据格式 ----> 字符串 ----& ...
- 【Android Studio】 资源下载
Gradle各版本集合 http://services.gradle.org/distributions/ Android Studio各版本集合 http://www.android-studio. ...
- 浏览器性能监控performance使用
浏览器中有一个performance的性能监控,平时我也没有用到,接手了一个大数据的项目,发现页面打开的比较慢,使用浏览器的performance分析可以看到各个步骤花费的时间. 关于项目的性能分析如 ...