vue2项目中全局封装axios问题

目录

• vue2全局封装axios
• 封装axios
• 封装api 函数
• vue2.X中axios简单封装和多功能封装
• vue2.X 中axios的简单封装
• 多功能封装

vue2全局封装axios

封装axios

第一步

• 1.src 目录中新建utils文件夹
• 2.utils文件中建立http.js文件

http.js文件的内容

//第一步导入axios
import axios from 'axios'
import { Toast } from 'vant';
//第二步 我们可以声明一个新的常量axios 我们可以配置一些基础 公共的路径配置   比如说baseURL timeout请求失败超时报错 withcookies...之类的东西
const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_URL//如果配置了环境变量就可以直接写/api,
    withCredentials: true,
    timeout: 3000//请求超时
})

//第三步 设置请求拦截
//新的常量axios service.拦截器.请求.使用===》 里头有两个参数 一个成功的回调函数  一个失败的回调函数
service.interceptors.request.use(config=>{
    //每次发送请求要进行的公共操作  每次发送请求一般需要的操作一般都有 开启loading加载动画 token写在请求的头部 之类的
    //loading
    Toast.loading({
        message: '加载中...',
        forbidClick: true,
      });
    //最后的话一定要给他return出去 不return不执行
    return config
},err=>{
    //请求的时候如果发生错误了， 这边直接给它抛出错误就行
    // throw new Error(err)抛出的是一个红色的报错方便我们查看寻找
    throw new Error(err)
})

//第四步 设置响应拦截
service.interceptors.response.use(response=>{
//我们每次成功发送一个请求 它都会有响应的 参数也是两个
    //一般成功之后可以清除或关闭loading动画 还可以判断一些状态码
  //清除loading动画 
    Toast.clear()
    
    //判断状态码
    const res = response.data
    if (res.status && res.status !== 200) {
      // 登录超时,重新登录
      if (res.status === 401) {
        Toast.loading({
            message: '登录超时，请从新登录',
            forbidClick: true,
          });
      }
      return Promise.reject(res || 'error')
    } else {
      return res.data
    }
},err=>{
    return Promise.reject(err)
})
//导出  导出这个模块
export default service

封装api 函数

第一步先在utils文件夹中新建api.js

api.js文件的内容

//这边的话 先导入封装好的新的axios
import service from './http';
//然后我们可以封装一些接口函数 比如说 登录的 注册的 首页的 分类的 轮播的 //但是要确认参数传的是get还是post请求
//首页
export function getHome(data){
    return service.get('/home',data)
}
//方便我们后期的维护 代码美观 方便快捷
//轮播
export function lunbo(data){
    return service.get('/home/shejishi',data)
}
//比如说以后我们要维护封装好的接口 这样封装好后我们就不需要去组件里一个一个去找，直接来这个文件修改即可
//组件化开模块化发或者开发 它们都有一个原则
//高聚合 低耦合 
//高聚合就是 一个组件的业务一定要聚合在一起 一个组件的业务越集中越好
//低耦合就是 组件和组件之间的耦合度一定要低 意思就是两个组件之间的牵连越少越好

vue2.X中axios简单封装和多功能封装

vue2.X 中axios的简单封装

简单封装说明了封装思路，适合小白但想尝试封装的人。你可以在此基础上进行追加改造.

1.引入库

代码如下（示例）：

npm install axios 
npm install element-ui -S
// 或者
yarn add axios
yarn add element-ui

2.创建封装文件 request.js

代码如下（示例）：

/**
 * 全站http配置
 */
import axios from 'axios';
import { Message } from 'element-ui';
//默认超时时间
axios.defaults.timeout = 10000;
//返回其他状态码
axios.defaults.validateStatus = function (status) {
  return status >= 200 && status <= 500;
};
//跨域请求，允许保存cookie
axios.defaults.withCredentials = true;
//http request拦截 ，此处用到es6 Promise
axios.interceptors.request.use(config => {
	// 你可以通过config来配置请求头...
  const meta = (config.meta || {});
  //headers中配置text请求
  if (config.text === true) {
    config.headers["Content-Type"] = "text/plain";
  }
  //headers中配置serialize为true开启序列化
  if (config.method === 'post' && meta.isSerialize === true) {
    config.data = serialize(config.data);
  }
  return config
}, error => {
  return Promise.reject(error)
});
//http response 拦截，此处用到es6 Promise
axios.interceptors.response.use(res => {
  //获取状态码
  const status = res.data.code || res.status;
  const message = res.data.msg || res.data.error_description || '未知错误';
  //如果是401则跳转到登录页面
  if (status === 401) { 
	//router.push({ path: '/login' }))
  }; 
  // 如果请求为非200否者默认统一处理
  if (status !== 200) {
    Message({
      message: message,
      type: 'error'
    });
    return Promise.reject(new Error(message))
  }
  return res;
}, error => {
 
  return Promise.reject(new Error(error));
});
export default axios;

3.使用方式

在vue项目的根目录下的main.js 正常引用就好啦

import request from './api/request/request.js'  
Vue.prototype.request = request;

接下来去页面中调用。这里唯一可能会犯错的地方

• 1. url路径的开头忘记加 / 了！ hhh
• 2. /api 不明白是干什么的。其实这里是 devServer.proxy 的key

let _self = this;
let id = '123';
let name = 'abner';
let url = '/api/blade-performance-mgt/hzy/performance/record/planSubmit';  // 请求地址
// post 请求
 _self.request
     .post(url, {
         id: id,
         name: name ,
     })
     .then((res) => {
         // res
     });
     
     
// git 请求
let url = '/api/blade-performance-mgt/hzy/performance/record/list;  // 请求地址
_self.request.get(url)
  .then((res) => {
    // res
  });

也发下vue.config.js的配置吧！

这里只需要看下devServer中的配置就行

module.exports = {
  //路径前缀
  publicPath: "/",
  lintOnSave: true,
  productionSourceMap: false,
  chainWebpack: (config) => {
    //忽略的打包文件
    config.externals({
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex',
      'axios': 'axios',
      'element-ui': 'ELEMENT',
    });
    const entry = config.entry('app');
    entry.add('babel-polyfill').end();
    entry.add('classlist-polyfill').end();
    entry.add('@/mock').end();
  },
  css: {
    extract: { ignoreOrder: true }
  },
  //开发模式反向代理配置，生产模式请使用Nginx部署并配置反向代理
  devServer: {
    port: 1888,
    proxy: {
      '/api': {
        //本地服务接口地址
        // target: 'http://localhost',
        //远程演示服务地址,可用于直接启动项目
        target: 'http://10.1.100.248:8000/api',
        // target: 'http://10.1.6.67:8033',
        ws: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  }
};

多功能封装

这种为了更好的分离代码，需要创建两个文件interceptor.js和request.js

1.创建request文件夹，我的项目目录如下

interceptor.js 代码如下

/**
 * Author：abner ，修改于5月28
 * 生成基础axios对象，并对请求和响应做处理
 * 前后端约定接口返回解构规范
 * {
 *    code:200,
 *    data:"成功",
 *    msg: "操作成功"
 *    success: true
 * }
 */
import axios from 'axios'
import { Message } from 'element-ui'
import { getToken } from '@/util/auth'; // 获取token值的方法，如何没有用token验证删掉即可
// 创建一个独立的axios实例
const service = axios.create({
    // 设置baseUr地址,如果通过proxy跨域可直接填写base地址
    baseURL: '/api',
    // 定义统一的请求头部
    headers: {
       // 'Authorization': ``, // 此处对应后台AOP验证,
        'Content-Type': 'application/json' //默认方式提交数据
        // 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' //表单方式提交数据
    },
    // 配置请求超时时间
    timeout: 10000,
    // 如果用的JSONP，可以配置此参数带上cookie凭证，如果是代理和CORS不用设置
    withCredentials: true
});
// 请求拦截
service.interceptors.request.use(config => {
    // 在header中自定义token参数名：tokenHeader，可添加项目token
    config.headers[tokenHeader] =  getToken()
    return config;
});
// 返回拦截
service.interceptors.response.use((response) => {
    // 获取接口返回结果
    const res = response.data;
    // code为200，直接把结果返回回去，这样前端代码就不用在获取一次data.
    if (res.code === 200) {
        return res;
    } else if (res.code === 10000) {
        // 10000假设是未登录状态码
        Message.warning(res.msg);
        // 也可使用router进行跳转
        window.location.href = '/#/login';
        return res;
    } else {
        // 错误显示可在service中控制，因为某些场景我们不想要展示错误
        // Message.error(res.message);
        return res;
    }
}, () => {
    Message.error('网络请求异常，请稍后重试!');
});
export default service;

request.js中你需要知道的

这里需要说明的是请求方式那里的判断，我们需要知道axios不同请求方式默认传参的方式是不同的，比如：

1.post请求我们一般都用data:{} 这中方式传参

2.get请求我们一般都用params:{} 这中方式传参

又比如

//如果服务端将参数作为对象来封装接受
axios.delete('demo/url', {
    data: {
        id: 123,
        name: 'Henry',
    },
     timeout: 1000,
    ...//其他相关配置
})
//如果服务端将参数作为url参数来接受，则请求的url为:www.demo/url?a=1&b=2形式
axios.delete('demo/url', {
    params: {
        id: 123,
        name: 'Henry',
    },
     timeout: 1000,
    ...//其他相关配置
})

我们需要对不同的请求，不同的情况进行判断处理

request.js 代码如下

/**
 * request.js
 * 通过promise对axios做二次封装，针对用户端参数，做灵活配置
 * Author：abner ，修改于5月28
 */
import { Message, Loading } from 'element-ui';
import instance from './interceptor'
/**
 * 核心函数，可通过它处理一切请求数据，并做横向扩展
 * @param {url} 请求地址
 * @param {params} 请求参数
 * @param {options} 请求配置，针对当前本次请求；
 * @param loading 是否显示loading
 * @param mock 本次是否请求mock而非线上
 * @param error 本次是否显示错误
 */
function request(url, params, options = { loading: true, mock: false, error: true }, method) {
    // let loadingInstance = '';
    // 请求前loading
    // if (options.loading) loadingInstance = Loading.service({background:'transparent'});
    return new Promise((resolve, reject) => {
        let data = {}
        // get请求使用params字段
        if (method == 'get') data = { params }
        // post请求使用data字段
        if (method == 'post') data = { data: params }
        // delete请求使用params字段
        if (method == 'delete') data = { params }
        // 通过mock平台可对局部接口进行mock设置
        if (options.mock) url = 'http://www.mock.com/mock/xxxx/api';
        instance({
            url,
            method,
            ...data
        }).then((res) => {
            // 此处作用很大，可以扩展很多功能。对返回的数据进行统一处理
            if (res && res.code === 200) {
                resolve(res.data);
            } else {
                // 通过配置可关闭错误提示
                if (res && options.error) Message.error(res.msg);
                reject(res);
            }
        }).catch((error) => {
            Message.error(error.message)
        }).finally(() => {
            // loadingInstance.close();
        })
    })
}
// 封装GET请求
function get(url, params, options) {
    return request(url, params, options, 'get')
}
// 封装POST请求
function post(url, params, options) {
    return request(url, params, options, 'post')
}
// 封装DELETE请求
function Delete(url, params, options) {
    return request(url, params, options, 'delete')
}
export default {
    get, post, Delete
}

使用步骤

1.在main.js中添加

import request from './api/request/request'
Vue.prototype.request = request;

2.在方法中直接使用

methods: {
        getUnitTabledata() {
            let _self = this;
            _self.request
                .get("/lnjzxh-awards-mgt/lnjzxh/award/serial/unit/list/page", {
                    awardName: _self.searchName,
                    status: _self.statusValue,
                    account: _self.account,
                    createDate: _self.pickerValue,
                    current: _self.page.currentPage - 1,
                    size: _self.page.pageSize,
                })
                .then((res) => {
                    _self.page.total = res.total;
                    _self.tableData = res.records;
                });
        },
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。