小白学习vuejs-24

TheWQ
129 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第24天，点击查看活动详情

自学前端

  • 前文
    • 本文是我自学vue的一些知识以及个人理解, 希望帮助到一些想要学习前端的小白朋友
    • 介绍本次学习的是vuex相关知识
    • 这是基于我学习的笔记而来的文章
    • backend: 后端 frontend: 前端

jsonp

  • 在前端开发中, 我们常见的网络请求方式就是JSONP
    • 使用JSONP最主要的原因往往是为了解决跨域访问的问题
  • JSONP的原理是什么呢
    • JSONP的核心在于通过
    • 原因是我们的项目部署在domain1.com服务器上是, 是不能直接访问domain2.com服务器上的资料的
    • 这个时候, 我们利用
    • 所以, 封装jsonp的核心就在于我们监听window上的jsonp进行回调时的名称
    • jsonp.png

为什么选择axios

  • 为什么选择axios?作者推荐和功能特点
  • axios.png
  • 功能特点:
    • 在浏览器中发送XMLHttpRequests请求
    • 在node.js中发送http请求
    • 支持Promise API
    • 拦截请求和响应
    • 转换请求和响应数据
    • 等等
  • 补充: axios名称由来?个人理解
    • 没有具体的翻译
    • axios: ajax i/o system

axiox请求方式

  • 支持多种请求方式:
    • axios(config)
    • axios.request(config)
    • axios.get(url[, config])
    • axios.delete(url,[config])
    • axios.head(url,[config])
    • axios.post(url,[, data[config]])
    • axios.put(url,[, data[config]])
    • axios.patch(url,[, data[config]])
  • 如何发送请求呢?
    • 我们看下下边的案例
    • axios2.png

发送并发请求

  • 有时候, 我们可能需求同时发送两个请求
    • 使用axios.all, 可以放入多个请求的数组
    • axios.all([]) 返回的结果是一个数组, 使用axios.spread可将数组[res1, res2]展开为res1, res2
    • axios3.png

全局配置

  • 在上面的示例中, 我们BaseURL是固定的

    • 事实上, 在开发中可能很多参数都是固定的

    • 这个时候我们可以进行一些抽取, 也可以利用axios的全局配置

      axios.defaults.baseURL = '123.207.32.32:8000'

      axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

axios全局配置.png

常见的配置选项

  • 请求地址
    • url: '/user',
  • 请求类型
    • method: 'get',
  • 根路径
  • 请求前的数据处理
    • transformRequest:[function(data){}]
  • 请求后的数据处理
    • transformResponse: [function(data){}],
  • 自定义的请求头
    • headers:{'x-Requested-With':'XMLHttpRequest'},
  • URL查询对象
    • params: {id: 12},
  • 查询对象序列化函数
    • paramsSerializer: function(params){}
  • request body
    • data: {key: 'aa'}
  • 超时设置s
    • timeout: 1000,
  • 跨域是否代Token
    • withCredentials: false,
  • 自定义请求处理
    • adapter: function(resolve, reject, config){},
  • 身份验证信息
    • auth: {uname: '', pwd: '12'},
  • 响应数据格式 json /blob/document/arrayuffer/text/stream
    • responseType: 'json',

axios的实例

  • 为什么要创建axios的实例呢?
    • 当我们从axios模块中导入对象时, 使用的实例是默认的实例,
    • 当给该实例设置一些默认配置是, 这些配置就被固定下来了
    • 但是后续开发中, 某些配置可能会不太一样
    • 比如默写请求需要使用特定的baseURL或者timeout或者content-Type等
    • 这些时候, 我们就可以创建新的实例, 并且传入该实例的配置信息
    • axios4.png

如何使用拦截器?

  • axios提供了拦截器, 用于我们在发送每次请求或者得到响应后, 进行对应的处理
  • 如何使用拦截器呢?
  • axios拦截器.png

后记

  • 希望对对前端有兴趣的朋友们有帮助
  • 这篇文章主要是关于vuex的, 希望大家喜欢
  • vue的作者是中国人尤雨溪, 非常厉害的人
avatar
文章
阅读
粉丝