Vuejs2.0学习笔记之axios&vue-resource

原创
2019/03/01 21:23
阅读数 586
  1. 在Vue中发送AJAX请求:Vue本身并不支持发送ajax请求,需要使用第三方插件vue-resources(1.0, 但是2.0中不建议使用)、官方推荐使用axis(2.0);但是也可以用jQuery;
  2. 什么是axios?axios是一个基于promise的http请求客户端,用来发送请求,也是vue2.0官方推荐使用的;在vue2.0官方推荐的,同时不再对vue-resource进行更新和维护。
  3. axios的github地址和使用方式:https://github.com/axios/axios
  4. 使用axios说明:
axios([options])  
axios.get(url[,options]);
    传参方式:
        1.通过url传参
        2.通过params选项传参
axios.post(url,data,[options]);
    axios默认发送数据时,数据格式是Request Payload,并非我们常用的Form Data格式,
    所以参数必须要以键值对形式传递,不能以json形式传参
    传参方式:
        1.自己拼接为键值对
        2.使用transformRequest,在请求发送前将请求数据进行转换
        3.如果使用模块化开发,可以使用qs模块进行转换
 
axios本身并不支持发送跨域的请求,没有提供相应的API,作者也暂没计划在axios添加支持发送跨域请求,所以只能使用第三方库
  1. 如何解决跨域问题:
    • 客户端通过jsonp或者vue-resource支持: vue-resource帮助文档
    • 如果服务端通过CORS支持跨域,则客户端不需要处理跨域
    使用vue-resource的this.$http发送请求:
    this.$http.get(url, [options])
    this.$http.head(url, [options])
    this.$http.delete(url, [options])
    this.$http.jsonp(url, [options])
    this.$http.post(url, [body], [options])
    this.$http.put(url, [body], [options])
    this.$http.patch(url, [body], [options]) 

事例:输入github的uid,通过github提供的api来获取name和avatar.

展开阅读全文
打赏
0
4 收藏
分享
加载中
更多评论
打赏
0 评论
4 收藏
0
分享
返回顶部
顶部