Vue对axios进行简洁封装

一、axios的封装

Vue或者React中的项目中，我们通常使用axios获取后台的数据，它是基于promise的http库，也可运行在浏览器端和node.js中。他也有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等，如果还有对axios不了解的，可以点击查阅axios文档。如果有需要改进的地方请在下方评论留言，如果对你有帮助 请帮我点个赞谢谢。

安装

npm安装

  npm install axios; 

bower安装

  bower  install axios; 

使用 CDN引入(这里我们用的是 jsDelivr)

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

引入axios库

在我们项目中的src路径里面 新建utils文件夹并且 创建一个名为http的js文件

  import axios from 'axios'
  import { Message } from "element-ui"; // 引入element-ui的message提示组件,也可以引入其他弹框组件

环境切换

   const isDev = process.env.NODE_ENV==='development';
   export const domain = isDev?'http://www.development.com':'http://www.production.com'; 
   //导出域名变量 比方说用element-ui 使用上传组件会用到 
   const service = axios.create({
      timeout: 10000, //设置请求超时时间
      baseURL: domain + "/api/" 
      // 设置baseURL 除非调用接口的时候url 是 /或者绝对路径。否则url将会放在baseURL之后
   });

拦截请求

这里的getToken函数我用的js-cookie这个包 具体实现代码和localStorage语法类似

 service.interceptors.request.use(
  config => {
   //在请求头统一加入 后台返回的token;
  
   const token = getToken();
    if (token) {
      config.headers["Authorization"] = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

拦截响应

这里我们对后台返回给我们的值做一下处理，避免写重复的代码

const ErrorMessage = {
  404: "请求地址错误",
  403: "禁止访问",
  500: "服务器内部错误",
  0: "请求超时",
};
service.interceptors.response.use(
  (response) => {
    //解构赋值response对象
    const { code, data,message } = response.data;
    if (code === 200) {
      return data;
    } else if (code === xxx||code===yyy) {
      errorMessage(message);
    }else if(code===401){
      //如果后台返回了401,我们可以先清空浏览器存储token;
      //然后跳转登录或者其他页面
      // 跳转路由可以引入router.js导出的VueRouter实列然后结合VueX实现相关逻辑
    }
    return Promise.reject(response);
  },
  (error) => {
    const { status, data } = error.response;
    if (ErrorMessage[status]) {
      errorMessage(ErrorMessage[status]);
    } else {
      errorMessage(data.message);
    }
    return Promise.reject(error);
  }
);

导出几个常用方法

export default service; //导出service实例

export const post = service.post; //导出post方法

export const get = service.get;//导出get方法

使用简介

• 在src目录下新建一个api文件夹存放我们后台接口地址
• 一般用vue-cli创建的项目都会有一个webpack alias @符号 指向项目的src路径。
• 没有用vue-cli的搭建的项目可以在webpack中的resolve.alias自行配置

import {post,get} from '@/utils/http.js';

//get使用方法
export function a(params){
    return get('url',{
       params
    })
}

//post使用方法
export function b(opt){
    return post('url',opt)
}