封装axios请求函数

在实际的项目开发中，一定程度上的封装axios，管理请求的api
有助于精简项目的代码，统一管理api，便于持续性开发。

接下来就看看我在我自己的小项目中是如何封装的吧
（可能会用到部分伪代码）

1.安装axios
（这一步就略过咯）

2.在src/util/axios.js新建了axios.js

3.在axios.js引入

	import { cookieData } from "@/util/local";
	import axios from "axios";

在main.js引入

   import axios from "./util/axios";

进行一些基本的配置

axios.defaults.headers.post["Content-Type"] =
  "application/x-www-form-urlencoded";
// axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.withCredentials = true;
axios.defaults.timeout = 60000;
axios.baseURL = "你的请求地址";

4.写一个请求拦截器
（这里你们可以根据自己的实际需求来写，只是提供一个解决问题的思路）

// 请求拦截器
axios.interceptors.request.use(
  function(config) {
    // 查找cookie有没有token ，有则添加token请求头
    if (cookieData("get", "token")) {
      config.headers.token = cookieData("get", "token");
    }
    return config;
  },
  function(error) {
    return Promise.reject(error);
  }
);

5.写一个响应拦截器
（在这里我们可以对响应的状态码提示进行一个全局的管理）

// 响应拦截器
axios.interceptors.response.use(
  function(response) {
    if (response.data.status == 401) {
      Message.error({
        background: true,
        content: "登录过期",
        duration: 10,
        closable: true
      });
      cookieData("clean", "token"); // 清除token
      window.location.replace("一般是返回登录页"); // 重定向路由地址
    }
    if (response.data.status == 500) {
      Message.error({
        background: true,
        content: response.data.msg,
        duration: 10,
        closable: true
      });
    }
    return response.data;
  },

  function(error) {
    MessageTip.instance(error.response.status);//根据返回的状态码，弹窗对应的提示
    return Promise.reject(error);
  }
);

6.封装get和post请求

export default {
  //get请求
  get(url, param) {
    return new Promise((resolve, reject) => {
      axios({
        method: "get",
        url,
        params: param
      })
        .then(res => {
          if (res.status == 200 || res.status == 403) {
            resolve(res);
          }  else if (res.status != 401 && res.status < 500) {
            reject(res);
            Message.error({
              background: true,
              content: res.msg,
              duration: 10,
              closable: true
            });
          } else if (res.status >= 500) {
            reject(res);
          }else {
            resolve(res);
          }
        })
        .catch(error => {
          Message.error({
            background: true,
            content: "网络错误",
            duration: 10,
            closable: true
          });

          reject(error);
        });
    });
  },
  //post请求
  post(url, param) {
    return new Promise((resolve, reject) => {
      axios({
        method: "post",
        url,
        data: param,
        headers: {
          "Content-Type": "application/json;charset=UTF-8"
        }
      })
        .then(res => {
          if (res.status == 200) {
            resolve(res);
          } else if( res.status != 500 ){
            Message.error({
              background: true,
              content: res.msg,
              duration: 10,
              closable: true
            });
            reject(res);
          } else {
            reject(res);
          }
        })
        .catch(error => {
          reject(error);
        });
    });
  }
};

7.新建api的文件架，统一管理api
src/api
随便建一个count.js文件

import axios from "../util/axios";

// get
export function getfuntian() {
  return new Promise((resolve, reject) => {
    axios
      .get("/api/你的地址")
      .then(res => {
        resolve(res);
      })
      .catch(err => {
        reject(err);
      });
  });
}
// post
export function postfuntian (data) {
  return new Promise((resolve, reject) => {
    axios
      .post('/api/你的地址', data)
      .then(res => {
        resolve(res)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}

值得注意的是，这里使用了Promise来封装这个请求的方法，这里不了解Promise可以去看看ES的语法
接下来就是在页面中使用这些方法啦

8.页面中使用

//引入方法
import {getfuntian ,postfuntian } from "../api/count"
//使用
getfuntian().then((res)=>{
//请求到的数据
})
.catch(()=>{
//请求错误时
})