axios二次 封装

前提准备

下载axios   下载mint-ui

 

axios.js代码如下

import axios from "axios"; //引入axios
// 引入提示组件以及加载中的组件
import {
  Toast,Indicator
} from "mint-ui";

//配置全局的路由
axios.defaults.baseURL = process.env.API_URL;   //本地调试的时候用测试服    打包之后是正式服


//封装请求   options表示请求的参数  islogin表示的是是否显示加载中的,值为1的时候显示加载中  否则不显示
export function fetch(options, islogin) {
  if (islogin == 1) {
    Indicator.open({
      text: "加载中...",
      spinnerType: "fading-circle"
    });
  }

  // Promise封装axios
  return new Promise((resolve, reject) => {
    //创建一个axios实例
    const axios1 = axios.create({
      "timeout": 30000, // 请求超时时间  
      headers: {        // 请求头  
        "Content-Type": "application/json;charset=UTF-8"
      }
    });

    axios1(options)
      // 请求成功之后的操作
      .then(response => {
        //then 请求成功之后进行什么操作  根据实际的需求来
        if (response.data.code == 100) {    //code等于100表示请求正确  把请求到的数据发到引用请求的地方
          resolve(response.data); 
          Indicator.close();
        } else {                            //否则打印后台的错误信息
          Indicator.close();
          Toast({
            message: response.data.extend.msg,
            position: "middle",
            duration: 3000
          });
        }

      })
      // 请求失败之后显示请求异常
      .catch(error => {
        reject(error);
        Indicator.close();
        Toast({
          message: "请求异常",
          position: "middle",
          duration: 3000
        });
      });
  });
}

 

使用时

//引入封装的axios文件
import {
  fetch
} from "./axios.js"


特殊请求如下,如果后台需要你发送一个json数据的时候

fetch({
    method: "post",
    url: "/apiapi",
    data: JSON.stringify({ ...里面是请求的参数}),
    headers: {
      "Content-Type": "application/json"
    }
  }).then(function(res){})


普通请求如下

fetch({
    method: "get",
    url: "/apiapi",
    params: {
    ...里面是请求的参数
    }
  }).then(function(res){})