专栏首页ppjun专栏Vue 入门之网络请求

Vue 入门之网络请求

Vue 2.0 之后官方推荐使用 axios 来完成前端的网络请求,不再推荐使用 vue-resource 了。下面我们安装使用 axios,来完成的常见的 get ,post 请求。并解决常见的跨域问题。 而axios的强大包括以下几点:

  1. 从浏览器中创建 XMLHttpRequests
  2. 从 node.js 创建 http 请求
  3. 支持 Promise API
  4. 拦截请求和响应
  5. 转换请求数据和响应数据
  6. 取消请求
  7. 自动转换 JSON 数据
  8. 客户端支持防御 XSRF

若有不当之处,请阁下大胆斧正,小弟我大恩不言谢。

安装

npm install --save axios vue-axios

安装完成后,在你项目的 main.js 手动 import 进来并且使用。

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axiosInstance)

总结,Vue 需要用到什么插件,都要经过先安装,再手动导入,然后 调用Vue.use方法。BTW, axios 会自动将请求数据转换成 Json 格式,如果我们传给后台是表单格式就要设置一下 Content-Type 。

import Qs from 'qs'

var axiosInstance = axios.create({
  baseURL: location.protocol + '//127.0.0.1:8081/',
  transformRequest: function (data) {
    return Qs.stringify(data)
  },
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})

Vue.use(VueAxios, axiosInstance)

这里主要用到 qs 这个插件,将数据转换成 x-www-form-urlencoded 格式就是key=value&key=value 这样子,baseURL 可以帮助你设置主 URL,方便统一管理。

POST

 this.axios.post('admin/login', {
          'user_name': 'admin',
          'user_pwd': 'admin'
        }).then(res => {
          //res.data do something right
        }).catch(res => {
          //do something wrong
        })

这里只要传入url ,params ,这里的user_name就是服务器的 key 了。然后用 then 来获取成功的回调,处理 res.data 这个是后台返回的结果,用 catch 来接受失败的回调。

GET

 this.axios.get('/admin')
        .then(res => {
          console.log(res.data)
        })
        .catch(res => {
          console.log(res.data)
        })

Get 的时候就省略了 params 这个参数了,直接在 then 接受回调。

跨域

当前端直接访问其他地址时,就会出现 Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the request rsource.这个错误。

这时候需要后台跨域,比如 java 后台跨域创建 CrossFiledConfig 类完成跨域。

@Configuration
class CrossFiledConfig:WebMvcConfigurerAdapter() {


    override fun addCorsMappings(registry: CorsRegistry) {
        super.addCorsMappings(registry)
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedMethods("GET","POST","DELETE","PUT")
                .maxAge(3600)
    }

}

总结

axios 官方推荐,持续维护,简单的配置就可以完成网络请求,还可以配置拦截器等操作,大大提高我们开发效率。下一篇,我们会讲到 Vue 的组件。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Xposed去抖音提示

    特别感谢https://www.52pojie.cn/thread-684757-1-1.html 官方教程:https://github.com/rovo8...

    ppjun
  • How to use DataBinding?

    A : How to use DataBinding? B : such as read this circle.

    ppjun
  • 2018 融云集成

    融云SDK满足 App 内的社交沟通需求,提供单群聊、超级群等多种聊天模式,支持红包、图片、语音和小视频,实时消息推送,高度自定义界面,高清音视频通话,有效提升...

    ppjun
  • RecyclerView 实现横向滚动效果

    我相信很久以前,大家在谈横向图片轮播是时候,优先会选择具有HorizontalScrollView效果和ViewPager来做,不过自从Google大会之后,系...

    xiangzhihong
  • 2.如何在RedHat7中实现OpenLDAP集成SSH登录并使用sssd同步用户

    温馨提示:要看高清无码套图,请使用手机打开并单击图片放大查看。 Fayson的github:https://github.com/fayson/cdhproje...

    Fayson
  • 【2020HBU天梯赛训练】7-53 名人堂与代金券

    对于在中国大学MOOC(http://www.icourse163.org/ )学习“数据结构”课程的学生,想要获得一张合格证书,总评成绩必须达到 60 分及以...

    韩旭051
  • Rainbond v5.1.2发布,微服务架构应用便捷管理和交付

    2019年3月,Rainbond发布v5.1版本,经过1个月在上百家企业的实际使用,团队持续跟进版本缺陷,迄今为止发布了2个BUG修复版本。

    Rainbond开源
  • [设计模式]工厂方法模式

    简介 工厂方法模式 (Factory Method)定义一个用于创建对象的接口,让子类决定实例化哪一个类。工厂方法使一个类的实例化延迟到其他子类。  工厂模式是...

    静默虚空
  • python日志模块

    由于 python 频繁打印会导致IDE或者系统奔溃,因此将其打印信息写入日志文件中:

    机器学习和大数据挖掘
  • 爱加密so保护简单脱壳测试

    1.   最近研究so文件的保护,在网上搜索发现爱加密支持对so文件的保护,然后联系客户,本来是想让客户保护一个自己的so文件来做测试的,结果客户各种不愿意,说...

    我是小三

扫码关注云+社区

领取腾讯云代金券