基于vue配置axios的方法步骤


Posted in Javascript onNovember 09, 2017

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(可以按需配置)
import Vue from 'vue'
import axios from 'axios'
//项目的一些环境配置参数,读取host
import config from '@/config'
//vuex状态管理,这里主要进行对全局loading的控制
import store from '@/store'
//vue-router对相应状态码的页面操作(router实例)
import router from '@/router'
//console对应封装
import { log } from '@/utils'

2、解决方案

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

// 加载最小时间
const MINI_TIME = 300
// 超时时间(超时时间)
let TIME_OUT_MAX = 5000
// 环境value
let _env = process.env.NODE_ENV
// 请求接口host
let _apiHost = config.api
// 请求组(判断当前请求数)
let _requests = []

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

axios.defaults.headers.common['Content-Type'] = 'application/json'
axios.defaults.baseURL = _apiHost

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

/**
 * 添加请求,显示loading
 * @param {请求配置} config 
 */
function pushRequest(config) {
 log(`${config.url}--begin`)
 _requests.push(config)
 Vue.$vux.loading.show({
  text: 'Loading'
 })
 store.dispatch('loading')
}

/**
 * 移除请求,无请求时关闭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基于上面的准备进行处理

/**
 * 请求地址,请求数据,是否静默,请求方法
 */
export default (url, data = {}, isSilence = false, method = 'POST') => {
 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、成功的话返回统一处理后的数据,失败则对状态码进行判断

_instance(_opts)
   .then(res => {
    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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
再谈ie和firefox下的document.all属性
Oct 21 Javascript
JavaScript 编写匿名函数的几种方法
Feb 21 Javascript
javascript 解决表单仍然提交即使监听处理函数返回false
Mar 14 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 Javascript
完美解决AJAX跨域问题
Nov 01 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
微信公众号 摇一摇周边功能开发
Dec 08 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 Javascript
jquery.pager.js实现分页效果
Jul 29 jQuery
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 Javascript
javascript实现移动端上传图片功能
Aug 18 Javascript
微信小程序倒计时功能实现代码
Nov 09 #Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 #jQuery
微信小程序获取手机号授权用户登录功能
Nov 09 #Javascript
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 #jQuery
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 #Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 #Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 #Javascript
You might like
php入门之连接mysql数据库的一个类
2012/04/21 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
获取网站跟路径的javascript代码(站点及虚拟目录)
2009/10/20 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
js简单时间比较的方法
2016/08/02 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
Python常用随机数与随机字符串方法实例
2015/04/09 Python
python下MySQLdb用法实例分析
2015/06/08 Python
python datetime中strptime用法详解
2019/08/29 Python
Django models文件模型变更错误解决
2020/05/11 Python
Pandas读取csv时如何设置列名
2020/06/02 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
自考生自我评价分享
2014/01/18 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
市场部岗位职责
2015/02/12 职场文书
电影红河谷观后感
2015/06/11 职场文书
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技