Vue中axios的二次封装

Vue项目中，前端与服务器进行数据交互主要用axios比较多，原生的axios发送请求处理数据不太友好，项目中可以二次开发自定义。

什么是 axios？

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

axios的特性

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF

二次封装的目的

• 简化get、post请求的代码
• 简化响应数据的处理
• 拦截所有请求，header中加入签名，防止非法请求
• Ajax异常的全局处理

封装步骤

1、安装axios

npm install axios

2、创建http-service.js文件，编写封装代码

import axios from 'axios';
import {AppFunc} from "../comm/AppFunc";
import {Constant} from "../comm/Constant";
import QS from 'qs';
//超时时间
axios.defaults.timeout = 15000;
//请求的根路径【我配置在常量文件中】
axios.defaults.baseURL = process.env.API_HOST;
//post请求参数序列化
axios.defaults.transformRequest = function (data) {
  return QS.stringify(data,{arrayFormat: 'brackets'});
};

//配置axios请求拦截器
axios.interceptors.request.use(config => {
  const time = new Date().getTime();
  config.headers['time'] = time;
  //header加入签名信息，防止非法请求
  config.headers['sign'] = AppFunc.genMD5(Constant.APP_KEY+time);
  config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
  return config;
});

//响应拦截器即异常处理
axios.interceptors.response.use(response => {
  return response
}, err => {
  if (err && err.response) {
    switch (err.response.status) {
      case 400:
        console.log('错误请求');
        break;
      case 401:
        console.log('未授权，请重新登录');
        break;
      case 403:
        console.log('拒绝访问');
        break;
      case 404:
        console.log('请求错误,未找到该资源');
        break;
      case 405:
        console.log('请求方法未允许');
        break;
      case 408:
        console.log('请求超时');
        break;
      case 500:
        console.log('服务器端出错');
        break;
      case 501:
        console.log('网络未实现');
        break;
      case 502:
        console.log('网络错误');
        break;
      case 503:
        console.log('服务不可用');
        break;
      case 504:
        console.log('网络超时');
        break;
      case 505:
        console.log('http版本不支持该请求');
        break;
      default:
        console.log(`连接错误${err.response.status}`);
    }
  } else {
    console.log('连接到服务器失败')
  }
  return Promise.resolve(err.response);
});

/**
 * 封装get、post请求
 * 参数：url/params
 * 方式：get/post
 */
export const ajax = {
  //封装get请求
  get(url,params) {
    return new Promise((resolve,reject) => {
      axios.get(url,{
        params:params
      }).then(response => {
          resolve(response.data);
        }).catch(err => {
          reject(err);
        })
    });
  },
  //封装post请求
  post(url,params){
    return new Promise((resolve,reject) => {
      axios.post(url,params)
        .then(response => {
          resolve(response.data);
        },err => {
          reject(err);
        })
    });
  }
};

3、main.js中引入，并设置为Vue的原型对象

//引入二次封装的axios
import {ajax} from './plugins/http-service';
Vue.prototype.$ajax=ajax;

4、使用

//二次封装后的ajax请求十分简单
me.$ajax.get('请求的URL',{请求参数})
//请求成功
.then(res => {})
//请求失败
.catch(res=>{});

至此全部结束，二次封装后的axios使用十分方便，且每次发请求前都会在请求头信息header中加入自定义的签名以供服务器验证请求的合法性，防止非法请求，一劳永逸。