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中发送请求:

  • 相关阅读:
    jq中$(function(){})与原生window.onload的区别
    利用window.parent调用Iframe父页面变量、方法的爬坑之路
    前端跨域3种基本解决方案
    MySQL按日期分组统计(按天统计,按月统计)
    go读取文件内容写入另一文件中
    C++中函数返回值是一个对象时的问题
    docker构建dpdk运行环境镜像
    NFS服务安装
    tesseract-4.0.0源码编译安装
    linux系统设置cpu孤立
  • 原文地址:https://www.cnblogs.com/yess/p/14824049.html
Copyright © 2011-2022 走看看