zoukankan      html  css  js  c++  java
  • axios

    1.axios是什么

    • 一个基于promise的HTTP库 , 可以用在浏览器和node.js中

    • 从node.js创建http请求

    • 支持Promise API

    • 转换请求数据和响应数据

    • 取消请求

    • 自动转换JSON数据

    • 客户端支持防御XSRF/CSRF

    • 批量发送多个请求

     

    简单拓展:

    • XSRF/CSRF :一种网络攻击方式 , 跨站域请求伪造 ,伪装受信任用户的请求进行资料窃取 , 07年左右出现曾列为互联网十大安全隐患之一

     

    2.axios封装

    为什么要封装?

    • 如果不封装 , 在api层混入到业务层,造成代码混乱

    • 例如 axios.post()直接写在vue文件中, 上线会转换为html , 会存在安全问题

    封装方案一

    在main.js导入

    //引入axios,并加到原型链中
    import axios from 'axios'
    Vue.prototype.$axios = axios;
    import Qs from 'qs'
    Vue.prototype.qs = Qs

    不建议以上原因如下:

    • 直接挂载在Vue原型上 , 会污染原型 , 每次new Vue 无论用不用axios , 都会自动挂载到原型 , 在性能上有影响

    • axios定位是http工具库,作为前后端交互的接口层, 与业务无关 , 不应该与this相关联

     

    axios常用语法

      axios(config):通用 / 最本质的发任意类型请求的方式

      axios(url[,config]):可以只指定url发get 请求

      axios.request(config):等同于axios(config)

      axios.get(url[,config]):发get请求

      axios.post(url[,config]):发post请求

      axios.delete(url[,config]):发delete请求

      axios.put(url[,config]):发put请求

     

      axios.defaults.xxx :请求的默认全局配置

      axios.interceptors.request.use():添加请求拦截器 (先添加后执行)

      axios.interceptors.response.use():添加响应拦截器 

           axios.defaults.withCredentials = true; //解决跨域是否携带凭证

      axios.create([config]):创建一个新的axios(它没有下面的功能)

      

           axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; //设置post请求头
      axios.defaults.headers.get['Content-Type'] = 'application/json;chartset=utf-8'; //设置get请求头
      config.headers['token'] =我是token //设置请求头携带token 
        config.headers.Authorization =我是token //设置请求头携带token

      axios.Cancel():用于创建取消请求的错误对象

      axios.CancelToken():用于创建取消的token对象

      axios.isCancel():是否是一个取消请求的错误

      axios.all(promises):用于批量执行多个异步请求 

      axios.spread():用来指定接收所有成功数据的回调函数的方法

     github文档地址:https://github.com/axios/axios

  • 相关阅读:
    八数码问题及其扩展
    java注释
    康托展开和逆康托展开
    模线性方程组
    欧拉函数
    扩展欧几里德
    商城项目实战 | 2.2 Android 仿京东商城——自定义 Toolbar (二)
    商城项目实战 | 2.1 Android 仿京东商城——自定义 Toolbar (一)
    商城项目实战 | 1.1 Android 仿京东商城底部布局的选择效果 —— Selector 选择器的实现
    Android使用Path实现仿最新淘宝轮播广告底部弧形有锯齿的问题以及解决办法
  • 原文地址:https://www.cnblogs.com/wxyblog/p/12659256.html
Copyright © 2011-2022 走看看