axios封装(一)基础配置

axios 是目前流行的Promise网络请求库,在浏览器端他通过 xhr方式创建ajax请求。在node环境下,通过 http 库创建网络请求。

axios 提供了丰富的配置,这里讲一讲我在工作中通常用到的基本配置方法。

因为我在工作中用 vue 进行开发,所以以下代码默认的环境是 vue-cli

创建一个 axios 实例

为什么要创建一个 axios 实例,而不是在 axios 对象上进行配置呢?是因为我们会应对复杂的使用场景,多个实例便于管理。

const isDev = process.env.NODE_ENV === ‘development‘;

const instance = axios.create({
  // baseURL是在proxyTable中会转发的配置,通过环境变量的判断,可以在开发和生产环境使用不同的url进行请求
  baseURL: isDev ? ‘/fakeapi‘ : ‘/api‘,
  timeout: 5000,

  validateStatus(status) {
    // 一般来说,http status为200-300之间时,均判定为请求通过,你可以在这里修改这个配置(不建议修改)
    return status === 200
  },
  headers: {
    // 定义 post 请求编码格式
    post: {
      ‘Content-Type‘: ‘application/x-www-form-urlencoded;charset=UTF-8‘
    }
  }
});

处理请求参数

虽然对请求设置了编码格式,但是还是需要进一步设置具体的编码格式,比如我想进行一些特殊的设置。

qs.stringify 这里的参数请参考这篇文章 qs.js - 更好的处理url参数

import Qs from ‘qs‘;

instance.interceptors.request.use(config => {
    // 也可以在这里给请求添加token之类的字段
    config.data = Qs.stringify(config.data, {arrayFormat: ‘repeat‘, allowDots: true});
    return config;
}, err => {
    return Promise.reject(err);
});

处理返回值

import httpErrorHandler from ‘./httpErrorHandler.js‘;

instance.interceptors.response.use(function(data) {
    // 这里可以对返回数据进行处理,比如验证code是否为1等
    return data.data;
}, httpErrorHandler)

httpErrorHandler.js 代码

# httpErrorHandler.js

export default (error) => {
  if (!error.response) {
    return Promise.reject({
        msg: ‘网络连接超时‘,
        error
    });
  };

  let msg = ‘‘;
  const status = error.response.status;

  switch (status) {
    case 400:
        msg = ‘错误的请求参数‘;
        break;
    case 401:
        msg = ‘没有该操作权限‘;
        break;
    case 403:
        msg = ‘请登录‘;
        break;
    case 404:
        msg = ‘错误的请求地址‘;
        break;
    case 500:
    case 501:
    case 502:
    case 503:
    case 504:
        msg = ‘服务器错误‘;
        break;
    default:
        msg = ‘未知错误‘ + status;
  }
  return Promise.reject({
      msg,
      error
  });
}

封装 get 方法

jquery.ajax 不同,axios的get方式需要通过 prarms 而不是 data参数传递:

/**
 * 封装后的axios get方法
 *
 * @param {string} url 请求路径
 * @param {object} option 请求参数
 * @param {object} [config] 特殊配置项(选填)
 * @returns
 */
export function get(url, option, config = {}) {
  return instance.get(url, { params: option }, config)
}

// 调用get
get(‘http://baidu.com‘, {
    a: 1,
    b: 2
})
.then(...)
.catch(...)

post 方式

post请求方式则要简单一些,不需要使用 prarms 参数

/**
 * 封装后的axios post方法
 *
 * @param {string} url 请求路径
 * @param {object} option 请求参数
 * @param {object} [config] 特殊配置项(选填)
 * @returns
 */
export function get(url, option, config = {}) {
  return instance.get(url, option, config)
}

// 调用post
post(‘http://baidu.com‘, {
    a: 1,
    b: 2
})
.then(...)
.catch(...)

upload 文件

上传文件需要使用不同的header设置和编码方式,所以需要创建一个单独的实例

const uploadInstance = axios.create({
  baseURL: isDev ? ‘/fakeapi‘ : ‘/api‘,
  timeout: 15000,
  headers: {
    // 发送文件需要的编码格式
    ‘Content-Type‘: ‘multipart/form-data‘
  }
});

/**
 * 封装后的axios upload方法
 *
 * @param {string} url 请求路径
 * @param {formdata} formdata 请求参数, 必须是formdata对象
 * @param {object} [config] 特殊配置项(选填)
 * @returns
 */
export function upload(url, formdata, config = {}) {
  return uploadInstance.post(url, formdata, config)
}

# 使用上传
let formData = new FormData();
formData.append("image", file);
formData.append("name", ‘name‘);
upload(‘http://baidu.com‘, formData, {
    onUploadProgress(progressEvent) {
        // 展示上传进度等
    }
})

原文地址:https://www.cnblogs.com/small-coder/p/9122820.html

时间: 2024-11-15 00:32:52

axios封装(一)基础配置的相关文章

StackExchange.Redis帮助类解决方案RedisRepository封装(基础配置)

本文版权归博客园和作者吴双本人共同所有,转载和爬虫,请注明原文地址.http://www.cnblogs.com/tdws/p/5815735.html 写在前面 这不是教程,分享而已,也欢迎园友们多提建议和指正.关于更多详细介绍,请到github上看Docs,下面附上地址. 关于Redis基础控制它台操作有疑问的,欢迎阅读本人Redis系列命令拾遗分享 http://www.cnblogs.com/tdws/tag/NoSql/ 如今StackService.Redis已经转向商业版本.4.0

vue2.0+webpack+vuerouter+vuex+axios构建项目基础

前言 本文讲解的是vue2.0+webpack+vuerouter+vuex+axios构建项目基础 步骤 1.全局安装webpack,命令 npm install webpack -g 注意,webpack升级到4舍弃了不少组件,之前有次使用淘宝镜像丢失了不少模块,所以webpack大家尽量使用npm装. 2.安装vue脚手架 npm install vue-cli -g 3.运行cmd(开始-运行-cmd-回车) 比如你的目录要安装在E盘,在命令面板中就输入"e:"然后回车cd到项

Varnish基础配置实现动静分离web站点

由于一个web站点的程序的访问具有局部性特征:时间上的局部性:一个数据被访问过之后,可能很快会被再次访问到:空间局部性:一个数据被访问时,其周边的数据也有可能被访问到;varnish可将这部分数据缓存下来.缓存的数据存在被访问较频繁的数据可以称其为热区:缓存同样存在局部性:时效性:如果缓存空间耗尽:则采用LRU,最近最少使用算法:将过期的缓存清理掉 varnish的基本工作原理: Varnish通过类似于HTPP反向代理的方式将可以用来缓存的数据缓存下来直接响应给客户端的缓存数据,如果缓存中没有

使用Java管理Azure(1):基础配置

Azure针对Java开发人员提供了非常丰富的依赖库,开发工具,和相关插件,让你通过Java对Azure进行服务管理和开发,本文第一步先介绍如何快速的配置Java开发工具,主要针对目前比较流行的Eclipse和Intellij IDEA工具. 本文主要是基础配置的介绍,主要分为以下三个部分: 准备Azure的测试账号 准备Eclipse的Azure开发环境 准备Intellij IDEA的Azure开发环境 ? 准备Azure测试账号 首先你需要有Azure中国的测试账号.你可以通过Azure.

DDNS基础配置

一.简介 DDNS全名Dynamic Domain Name Server,动态域名解析服务.是由DNS和DHCP服务器组合来提供服务,简单来说就是通过DHCP服务器分配的IP地址可以动态更新到DNS服务上,免除了手动指定的麻烦. 二.平台介绍 软件包都用了centos自带源安装的 centos6.4 x64 dhcp-4.1.1-31.P1.el6.x86_64 bind-9.8.2-0.10.rc1.el6.x86_64 三.服务器端配置过程 1.DNS服务器配置 我在之前的文章中已经写过如

          DNS的基础配置

一.DNS简介 1.DNS:Domain Name System(域名系统),是互联网上IP和域名相互解析的分布式层级结构的数据库.DNS的出现能够使用户更好的更加方便的访问互联网,不用记IP地址来访问互联网,可以通过人类更容易记住域名来访问互联网. 2.DNS是一种C/S架构的服务器,客户机用于一个名字对应的地址,而服务器是为客户机提供查询的,查询由两种机制:迭代查询和递归查询 迭代查询:一般是DNS服务器与DNS服务器之间的查询方式 递归查询:一般是客户机与服务器之间的查询方式 3.DNS是

zabbix 基础配置(四)

zabbix 基础配置(四) ============================================================================ 展示接口: ★graph:simple,custom: ★screen: ★slide show: 演示:   把之前定义的同类型的监控项,放在一屏上  1)设定图像的名称,要显示的监控项,颜色等根据自己的需要设定  2)在监测中,选择图形,查看自己定义的graphs,如下:  2.把所有的图像展现为一屏   1)

zabbix基础配置(二)

zabbix基础配置(二) ============================================================================= 概述: ============================================================================= zabbix agent安装配置:  安装配置过程 1.安装 # yum install zabbix-agent-3.0.2-1.el7.x86_64

H3C 交换机的基础配置

1.reset save    删除以前的配置 2.sysname 配置交换机的名字 3.interface 接口  配置IP地址 4.info-center synchronous       日志同步 5.添加用户与密码(指定类型,级别,认证方式) 6.配置aux vty 6.划分vlan 7.将端口添加到vlan中 8.ip http enable 开户web管理 9.ipmacbind IP地址 Mac地址 端口 vlan      IP.MAC.端口.Vlan的邦定命定 10.ip r