基于vue配置axios的方法步骤

前端之家收集整理的这篇文章主要介绍了基于vue配置axios的方法步骤前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

axios 简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:

  1. 从浏览器中创建 XMLHttpRequest
  2. 从 node.js 发出 http 请求
  3. 支持 Promise API
  4. 拦截请求和响应
  5. 转换请求和响应数据
  6. 取消请求
  7. 自动转换JSON数据
  8. 客户端支持防止 CSRF/XSRF

1、背景

  1. 在项目开发中ajax请求是必不可缺少
  2. 一部分ajax请求不需要loading或则请求时间少于多少是不显示loading
  3. 项目中对请求的同一化处理(错误处理,返回数据格式化处理,loading处理,token处理)
  4. 配置基于个人vue项目进行配置,已加载vux相关组件,会进行一些依赖的import(可以按需配置)
页面操作(router实例) import router from '@/router' //console对应封装 import { log } from '@/utils'

2、解决方

对于axios的封装中我们定义几个参数进行申明

一般一个项目中的根host和Content-Type都是统一的,这里对axios进行统一的配置(如果这个后端需要formData格式的表单即content-type='application/x-www-form-urlencoded;charset=utf-8'数据,需要对请求数据进行表单序列化,比较快的方式就是引入qs库qs.stringify进行处理后传输)

一般情况下项目中同一时刻都会有不止一个请求在进行(还没有返回),要判断当前是否还存在进行中的ajax,就需要对_requests这个数组进行维护;

/**

  • 移除请求,无请求时关闭loading
  • @param {请求配置} config
    */
    function popRequest(config) {
    log(${config.url}--end)
    let _index = _requests.findIndex(r => {
    return r === config
    })
    if (_index > -1) {
    _requests.splice(_index,1)
    }
    if (!_requests.length) {
    Vue.$vux.loading.hide(0)
    store.dispatch('loading',false)
    }
    }

接下来对axios基于上面的准备进行处理

{ let _opts = { method,url } //通用数据的合并(token) let _data = Object.assign({},data,{ token: store.getters.token }) const _query = {} for (let _key in _data) { if (_data.hasOwnProperty(_key) && _data[_key] !== '') { _query[_key] = _data[_key] } } //axios实例请求定时器ID let _timer = null //判断请求类型 if (method.toLocaleUpperCase() === 'POST') { _opts.data = _query } else { _opts.params = _query } //返回一个promise return new Promise((resolve,reject) => { //实例化axios const _instance = axios.create({ timeout: TIME_OUT_MAX }) //定义请求的唯一标识 let _random = { stamp: Date.now(),url: `${_apiHost + url}` } //判断是否静默(静默的话就不加入请求标识队列,不是则申明此请求实例的定时器) if (!isSilence) { _timer = setTimeout(() => { pushRequest(_random) },MINI_TIME) } //axios实例发送当前请求 //请求完成:1、取消当前请求的定时器;2、在当前请求标识队列中移除当前标识;

3、成功的话返回统一处理后的数据,失败则对状态码进行判断

{ let responseData = res.data clearTimeout(_timer) popRequest(_random) resolve(res.data) }) .catch(res => { let _response = res.response let _message = null clearTimeout(_timer) popRequest(_random) switch (_response.status) { case 404: _message = '404,错误请求' break case 401: router.push({ path: '/login',query: { redirect: router.currentRoute.fullPath } }) _message = '未授权' break case 403: _message = '禁止访问' break case 408: _message = '请求超时' break case 500: _message = '服务器内部错误' break case 501: _message = '功能未实现' break case 503: _message = '服务不可用' break case 504: _message = '网关错误' break default: _message = '未知错误' } if (!isSilence) { Vue.$vux.toast.show({ text: _response.data && _response.data.error ? _response.data.error : _message,type: 'warn',width: '10em' }) } reject(res) }) }) }

github地址:https://github.com/NoManReady/Tide/blob/master/src/utils/fetch.js

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的Vue相关文章