zoukankan      html  css  js  c++  java
  • axios

    1 使用 axios

    vue为了开发方便,提供了vue全家桶:vue, vuex, vue-router, vue-resource.

    在ES5开发中,使用vue-resource发送异步请求,但是在ES6中,作者不再维护vue-resource,而是建议使用axios框架发送异步请求。

    注意:axios不是vue家族的插件,因此不能用vue.use方法来安装。

    axios的使用方式与jquery类似,提供了一些简便方法:

    get(url, config) 发送get请求

      url表示请求地址,

      config表示配置项(可以定义params,headers等)

    post(url, data, config) 发送post请求

      url表示请求地址,

      data:表示携带的数据,

      config:表示配置项(可以定义params,headers等)

    注意:不论是get请求还是post请求,都可以携带query数据,query数据可以在两个位置添加

      1 在url上添加query数据。

      2 在config配置中的params属性中传递。

    axios实现了promise规范,因此,通过then方法监听结果

      第一个参数表示成功时候的回调函数:参数表示请求对象,其中data属性表示返回的数据

        当多次使用then方法的时候,前一个then方法的返回值,将作为后一个then方法的参数。

      第二个参数表示失败时候的回调函数,也可以通过catch方法监听失败

    axios提交的数据,默认使用的是json格式。

      可以通过修改headers中的Content-Type字段,来模拟表单提交。

      模拟表单: application/x-www-form-urlencoded

    2 安装 axios

    axios不是vue家族的插件,因此不能通过Vue.use方法来安装

    所谓的安装就是让每一个组件可以获取,使用更方便。

    所有的组件都继承了Vue类,如果Vue的原型具有axios对象,那么每一个组件(包括vue实例)都可以获取axios。

    所以对于非vue家族的插件可以通过拓展其原型的方式来安装

    为了语义化,将其命名为$http,例如: Vue.prototype.$http = axios;

    3 跨域请求代理

    在本地开发中可以使用线上的数据。

    webpack-dev-server支持跨域请求代理技术:

    通过devServer配置项,定义webpack-dev-server的配置

    port 定义端口,

    host 定义域名,

    open 是否自动打开浏览器

    proxy 定义跨域请求代理

      key 表示代理的请求

      value 表示代理的配置对象

        target 表示目标地址

        pathRewrite 表示是否重写路径

        secure 是否对https协议校验。

    vue中发送请求:

  • 相关阅读:
    SpringMVC01_入门案例
    Spring10_AOP
    Spring09_动态代理
    VisualGC IDEA插件(原创)
    IDEA 项目文件图标渲染类 CompoundIconProvider
    Visual VM 垃圾回收性能监控开源插件, 支持Java 8和VisualVM 2.0
    VisualGC 3.0 独立运行增强版, 支持JDK 8
    SpringMVC总结
    SSM框架整合
    MySQL免安装版配置教程
  • 原文地址:https://www.cnblogs.com/yess/p/14824049.html
Copyright © 2011-2022 走看看