• axios使用心得 2018-03-30 15:39:59
    从刚开始接触 Vue 时,官方维护了一个 request 项目是 vue-resource ,后来推荐使用社区的 axios 来作为 request 工具。两者之间的区别:axios支持服务端(Node中自带的 request 包并不支持promise,通常需要使用...

    从刚开始接触 Vue 时,官方维护了一个 request 项目是 vue-resource ,后来推荐使用社区的 axios 来作为 request 工具。

    两者之间的区别:

    1. axios支持服务端(Node中自带的 request 包并不支持promise,通常需要使用bluebird来进行promise化),resource不支持服务端
    2. axios 功能更加丰富,支持 Intercept 功能。

    刚开始使用axios 的时候,只会在 main.js 中统一配置

    Vue.prototype.$http = axios
    • 1

    然后就按照之前Vue-resource的写法进行书写,在小项目中这样使用也确实没有提现出axios
    的优势。

    在17年11月进行的创天下项目中,遇到了很多关于 权限校验 及一些数据格式转化的问题。

    数据格式

    axios 默认的是以 JSON 数据格式来传输的。
    而常见的POST提交数据的格式有四种,分别是:

    1. application/x-www-form-urlencodeed
    2. multipart/form-data
    3. application/json
    4. text/xml

      而创天下项目中使用的基本都是application/x-www-urlencodeed,当时颇为不解,最终意识到,需要进行格式转换。
      通常有两种做法:

    增加axiostransformRequest配置

    axios({
        url: '/api',
        data: {
            firstName: 'Spawn',
            lastName: 'Heaston'
        },
        transformRequest: [function(data) {
            let ret = ''
            for (let i in data){
                ret += encodeURIComponent(i) + '=' + encodeURIComponent(data[i]) + '&'
            }
            return ret
        }]
    })

    使用qs包

    import qs from 'qs'
    qs.stringify(data)
    • 1
    • 2

    这里其实还有很多有趣的写法:

    var params = new URLSearchParams();
    params.append('param1', 'value1');
    params.append('param2', 'value2');
    axios.post('/foo', params);
    对浏览器要求高,但看caniuse上,现阶段基本上也可以使用了

    这里写图片描述


    鉴权

    在项目中经常需要对用户身份进行鉴权,在Vue项目中通常需要axiosvue-router相结合使用,才能更好的把控权限。

    Vue-router 官方推荐的写法是在路由的meta中设置字段(requiresAuth: true),但是具体情况具体分析,因为项目中页面较多,所以采取了匹配路由的形式

    router.beforeEach((to, from, next) => {
      // 官方做法是meta,但该项目都是子路由,较多,采用模糊匹配
      if ((to.path.indexOf('/my/') !== -1) && !Storage.get('api_token')) {
        let url = to.fullPath.includes('/my/') ? '/my' : to.fullPath
        // 这里的处理不优雅,应该直接把currentUrl以get传参的形式传递给/signin
        // next(`/sign?redirect=${url}`)
        Storage.set('currentUrl', url)
        next('/signin')
      } else {
        next()
      }
    })

    这个是路由层面的拦截器,但是仅仅如此是不足以满足业务需求的,比如在商品详情页浏览的时候进行加入购物车操作,这时就需要对接口进行鉴权了。
    这时可以有两种操作:

    axios.interceptors.request.use(
        config => {
            // 在此处进行token校验
        }
    )
    axios.interceptors.reponse.use(
        res => {
              // 接口也会对用户进行鉴权,根据接口的response来进行处理
          if (res.data.login === '0') {
              let url = router.currentRoute.fullPath
              Storage.set('currentUrl', url)
              router.replace({
                path: '/signin'
              })
            }
            return res
        }
    )

    全局配置

    上个项目中,只知道用config.js来进行baseURL配置,后来阅读文档才知道可以全局配置

    axios.defaults.baseURL = '/apis'
    axios.defaults.timeout = 5000

    但是这个baseURL一般是为了在对接口进行proxy的时候使用,上线的时候其实很多时候并不需要进行配置

    之前写过这样的代码

    // 动态baseURL
    const origin = window.location.origin
    Storage.session.set('origin', origin)
    
    // axios 默认配置
    axios.defaults.baseURL = origin
    去之后,接口并不需要加域名,默认的就是当前域名,这块和后来接触的一个养老项目相比,理解就深刻了,因为接口部署在多个域名下,所以在SPA里就需要显式的把域名补全。

    这样比较推荐的做法是,使用两个axios实例,然后对每个实例进行默认配置,比较灵活一些

    let instance1 = axios.create({})
    let instance2 = axios.create({})
    instance1.defaults.baseURL = '/apis'
    instance2.defaults.baseURL = '/jay'

    all操作

    因为项目中有的 数据并不是存放在一个接口中,如果采用

    axios.get('/api1').then(res => {
        axios.get('/api2').then(r => {
            // 处理最终逻辑
        })
    })

    那么就耗时就是 api1 + api2 的时间了

    所以axios也支持类似 Promise.all 操作

    function get1 () {
        return axios.get('/api1')
    }
    function get2() {
        return axios.get('/api2')
    }
    
    axios.all([get1(), get2()]).then(axios.spread(function (acct, perms) {
        // Both requests are now complete
      })
    展开全文
  • axios全攻略 2017-05-23 09:19:16
    axios全攻略 axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest从 node.js 发出 http 请求支持 Promise API拦截请求和...
  • PC端微信内置浏览器vue axios没发出去请求,仅做记录 今天测试同学 测活动的时候 在windows下面的微信内邮件扫描二维码 竟然使用内置浏览器测了起来。 还有这种骚操作??? 之前的测试从来没测过这个浏览器,据说是腾讯...
  • 鹏飞前后端分离电商实战课程系列的第一期,介绍如何基于webpack4版本开发和构建电商PC端前端项目。课程遵循从webpack4入门到进阶、再到项目实战的教学路线,前期手把手教学,后期以布置作业、还原实现的方式,让学员...
  • 在vue中使用axios进行访问后台或者时其他api时,在pc端是需要进行跨域的配置,但是在移动端就不需要,直接写访问地址就可以了。 安装axios npm install axios --save 2.man.js中引入axios 3.跨域配置 ...
  • 使用Vue的axios连接部分正常,部分不正常,服务器状态码200,服务器控制台也不报错。但是页面请求就是报错。使用iPhone手机报错,换华为安卓手机也是一样的报错,安卓手机不知道怎么调试,使用macOS的Safari浏览器...
  • vuePC端项目踩坑记录 2019-05-20 17:08:52
    本文档用于记录vue相关PC端遇到的一些问题记录,方面团队成员共享 一、element-ui踩坑记录: 1、el-carousel 使用el-carousel幻灯片时,动态设置轮播时间interval。需要同步动态绑定autoplay的值。否则会出现轮播...
  • 因为业务需要,公司需要在web网页生成二维码,通过手机扫码实现支付宝,微信支付的功能。实例如下: 1、安装二维码生成插件,我这里用的是qrcodejs2插件,具体安装方法看我上一篇文章,生成二维码 2、直接上代码,...
  • 在java环境下使用axios.post请求后台,无法接收到入参
  • 登录成功之后完成layout页面 layout文件夹下的index.vue <template> <el-container class="layout"> <el-header class="header">...i class="el-icon-s-fold" @click="isCollapse=!...
  • 1.在使用异步请求后台时,由于官方不在更新vue-resource,推荐使用axios,因此在使用的时候难免会遇到各种问题。目前遇到最大的问题是在使用axios.post的请求向Java后端传入入参时,后端无法接收到参数。在这里主要...
  • 网上搜罗了一大圈关于微信不支持vue的问题,大部分都说是...我以为是引用axios的问题,改为了继续使用jq来获取数据,发现也是一样会出问题(郁闷。。。)最后一行行排查可疑代码最终定位到 下面代码 data => ...
  • 目录 ajax简介axios介绍手把手封装一个ajax封装好的ajax特点 正篇 ajax简介 AJAX即“AsynchronousJavascriptAndXML”(异步JavaScript和XML),在以往,我们刷新一个页面,必
  • 继续上一篇文章来说一下vuex的简单使用,一个基本的vue后台项目,需要反复使用到token这些变量,这里需要一个可以用来储存全局变量的方法,所以就用到了vuex vuex的使用方法和demo在官网都有:...
  • VUE-PC端项目遇到的坑总结 2019-06-11 14:12:04
    1.跨域其中说到跨域的话首要的就是axios的配置 // 创建axios实例 axios.defaults.timeout = 60000 // 响应时间 axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8' axios.defaults....
  • 1. 引用一个js 把自己的js type状态改为babel &lt;!-- 加载 Babel --&gt;   &lt;script src="https://unpkg.com/babel-standalone@6/babel.min.js"&gt;&...index...
  • axios封装笔记 2019-02-28 07:41:24
    引入 在 src 目录中创建 resource 目录,创建 api.js 文件用来封装 axios import axios from 'axios'; import qs from 'qs';...- axios.defaults.baseURL = `${window.location.origin}/api/pc/` 复制代码 baseURl...
  • axios的兼容性问题 2019-09-07 21:58:47
    1、axiosPC端浏览器的兼容性问题 axios支持IE8+,但原理是基于promise之上实现的,因此会存在不兼容IE的问题。 trident内核的浏览器下会报:vuex requires a Promise polyfill in this browser 解决方案: (1)...
  • PC端: 1.像比较常用的而且github中很多星星的,Element-UI,网址: 直通车. 还有一些其他的组件: https://www.iviewui.com/ https://github.com/museui/muse-ui bootstrap-vue 2…如何集成到现有项目中 a.安装包,npm i ...
  • vue-cli PC端构建 2018-02-08 16:12:55
    # 全局安装 vue-cli npm install --global vue-cli //首次安装需要 # 创建一个基于 webpack 模板的新项目 ...npm install//使用cnpm install代替 npm run dev localhost:8080查看 安装axios ...
1 2 3 4 5 ... 20
收藏数 1,870
精华内容 748