封装axios

对axios进行封装,多端口的处理,axios传递formData的处理,携带token请求数据

import axios from 'axios';  //引入axios

import { official as base } from './base'; //请求地址

//多个端口地址
const baseURL = { 
    login: base + "/biz",  
    productMsg: base + "/prod",
    homeMsg: base + "/science"
}

//每个端口单独封装
const axios1 = createAxios(baseURL.login)  
const axios2 = createAxios(baseURL.productMsg)
const axios3 = createAxios(baseURL.homeMsg)

export {
    axios1,
    axios2,
    axios3,
}

function createAxios(baseURL) {
    const axiosService = axios.create({
        baseURL: baseURL, //公用基础请求地址
        timeout: 5000, //超时时间
        responseType: "json", //返回数据类型
        withCredentials: true, // 是否允许带cookie这些
    })

    // request拦截器 => 对请求参数进行处理
    axiosService.interceptors.request.use(
        config => {

            //检测token是否存在 并携带token
            if (localStorage.userToken) {
                config.headers['userToken'] = localStorage.userToken
            }  

            if (config.method == "get") {
                //get请求参数为params
                config.headers = {
                    'X-Requested-With': 'XMLHttpRequest',
                    "Accept": "application/json",
                    "Content-Type": "application/json; charset=UTF-8", 
                    'Accept-Language': 'zh',
                    'token': localStorage.userToken || '' //也可以用在这里携带token
                }
            }
            if (config.method == "post") {
                 // post请求的请求参数为data   post传参为formData,将数据转换为formData对象,若为json格式则无需这一步
                if (config.data) {
                    const fromData = new FormData()
                    for (let i in config.data) {
                        fromData.append(i, config.data[i])
                    }
                    config.data = fromData
                }

                config.headers = {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', //该处传参为formData格式,如需json格式则改为  "application/json; charset=UTF-8" 
                    'Accept-Language': 'zh',
                    'token': localStorage.userToken || ''
                }
            }
            return config;
        }, error => {
            // 处理请求错误
            console.log("请求发起错误")
            console.log(error); // for debug
            Promise.reject(error);
        }
    );

    // respone拦截器 => 对响应数据做处理
    axiosService.interceptors.response.use(
        response => {
            let res = ""
            if (response.data) {
                res = response.data
            }
            // 返回码不等于200,直接进行错误处理 (该处返回码为后端返回,根据公司后端返回格式进行调整)
            if (res.code != 200) {
                //返回字符为后端处理后的错误信息,长度过多则未处理,在这里代为处理。具体msg字段根据各公司差异 message || msg
                if (res.message || res.msg.length <= 30) { 
                    return res
                } else {
                    res.msg = "网络异常"
                    return res
                }
            } else {
                return res;
            }
        }, error => {
            // 服务器未能响应数据
            let err = JSON.parse(JSON.stringify(error));
            console.log("链接服务器失败,请退出重试!", err)
            return Promise.reject(error);
        }
    );
    return axiosService
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 自己封装的模块化 axios 请求,详细 新增 http.js 文件用于封装 axios Import axios...
    江南永保春阅读 826评论 0 4
  • axios怎么封装,才能提升效率? 作为前端开发者,每个项目基本都需要和后台交互,目前比较流行的ajax库就是ax...
    不羁夜猫咪阅读 736评论 0 0
  • 一、axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise...
    张先觉阅读 1,811评论 1 12
  • 原文:掘金-楞锤-vue中Axios的封装和API接口的管理 安装 引入 src/request/http.js:...
    你喜欢吃青椒吗_c744阅读 876评论 2 17
  • 前言 axios 是一个轻量的 HTTP客户端,它基于 XMLHttpRequest 服务来执行 HTTP 请求,...
    champyin阅读 1,283评论 0 9