vue中axios跨域请求
2019-06-22 13:22
696 查看
vue中axios跨域请求
1.axios 是 第三方库
使用方法:
- 使用 npm:
$ npm install axios
- 使用 bower:
$ bower install axios
- 使用 cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios get 请求示例
HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> </head> <body> <div id="app"> <button @click="getData">get-mock-data</button> <button @click="get_api_data"> get-api-data </button> </div> </body> </html>
js代码
<script> console.log( axios ) // 当我们引入axios cdn后会全局暴露出一个axios对象 new Vue ({ el:"#app", methods:{ getData(){ // var p = axios({ // url:'./data/name.json' // }); // console.log(p);//axios是一个promise对象 axios({ url:"./data/name.json", method:'get',//method默认是get请求 }).then(function(res){ console.log(res) // axios会对我们请求来的结果进行再一次的封装( 让安全性提高 ) }).catch(err=>{ console.log(err) }) },
请求结果 : axios会对我们请求来的结果进行再一次的封装( 让安全性提高 )
//get在线跨域请求 get_api_data(){ axios({ url:'https://请求地址',//在线跨域请求 method:"GET",//默认是get请求 headers:{//设置请求头 'X-Client-Info':' {"a":"3000","ch":"1002","v":"5.0.4","e":"15611234619393093477584"}', 'X-Host': 'mall.film-ticket.film.list', }, params:{//?search后面的值写在params中 cityId: 330100, pageNum: 1, pageSize: 10, type: 1, k: 3969168, } }).then(function(val){ console.log(val) // axios会对我们请求来的结果进行再一次的封装( 让安全性提高 ) }).catch(function(err){ console.log(err) }) }, } }) </script>
get跨域请求中params:中的值对应hearders中Query String Parameters
get方法总结:
A: 无参数 axios.get(url).then(res=>console.log(res).catch(error=>conosle.log(error)) B: 有参数 axios({ url: 'http://xxx', method: 'get' //默认就是get,这个可以省略, params: { key: value } })
axios post 请求示例
html代码 <button @click="postData"> post-data </button> js代码 postData(){ let params = new URLSearchParams()//得到params对象,用来接收请求参数 // params.append( key, value ) key是参数名,value是参数值 //传递参数值 params.append( 'a', 2 ) params.append( 'b', 2 ) axios({ url:'http//localhost/php', method:'post', headers:{//请求头设置为表单提交的请求头 'Content-Type':"application/x-www-form-urlencoded" }, data:params, }).then( function (val) { console.log(res) }).catch( function (error) { console.log(error) }) } } 官方文档中axios post请求案例有点问题,请求会出现跨域问题; 以上示例为解决官方文档存在问题的写法;
post方法总结
//对于post请求可以统一设置一个请求头,后面所有post请求就可以不用单独设置请求头了 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; // 具体语法 let params = new URLSearchParams()//得到params对象,用来接收请求参数 // params.append(key,value) //请求参数写成键值对key就是参数名,value就是参数值 params.append('a',1) params.append('b',2) axios({ url: 'http://localhost/post.php', method: 'post', data: params,//将请求参数写入data; headers: { //单个请求设置请求头 'Content-Type': "application/x-www-form-urlencoded" } }) .then(res => { console.log( res ) }) .catch( error => { if( error ){ throw error } })
相关文章推荐
- vue中axios跨域请求解决
- 关于vue项目中,axios请求方式,跨域请求的处理
- vue请求方式axios和axios.get
- vue中axios解决跨域问题和拦截器使用
- vue中axios数据请求 get和post
- 在Vue-cli里基于axios封装复用请求
- 浅谈在Vue-cli里基于axios封装复用请求
- vue中axios处理http发送请求的示例(Post和get)
- vue项目在ie9中碰到的问题——axios请求拒绝访问
- vue中的所有axios请求都会发送2次,但是第一次不返回数据的原因
- vue中axios请求的封装实例代码
- vue项目中axios跨域的问题
- vue.js数据请求方式axios和fetch
- 实现axios的统一封装API,axios结果格式处理,vue组件的loading动画变量在axios请求的前后改变
- vue 路由切换时中断axios请求
- 20180204.ajax提交注册数据;axios跨域请求得到json字符串;实现注册功能
- vue实践笔记系列四——axios之post模式请求填坑
- vue 组件的封装之基于axios的ajax请求方法
- vue开发:axios的post请求接口出现404,但是get则成功
- Vue——axios基本配置及请求拦截