axiso的二次封装

创建一个名为api的文件夹，在api里面创建一个叫index.js的文档

在index.js文档中先引入axios，如果没有下载那就先下载

cnpm install --save axios
cnpm install --save vue-axios

安装后 

import axios from "axios";

在index下引入这个 

axios.defaults.timeout = 30000;

 这个设置多长时间，然后过期

axios.defaults.baseURL = "http://47.94.4.201";

 这个是二次封装的这个要是不会就先不管

// 添加响应拦截器

axios.interceptors.response.use(

  function (response) {
    //可以写if判断，提前拦截错误信息

    return response;

  },

  function (err) {
    return Promise.reject(err);

  }

);

这个是在数据发送回来时可以做的判断，可以写状态是否为200等等这些 

export function apiGet(url, params) {
  return new Promise((resolve, reject) => {
    axios

      .get(url, {
        params: params,

        headers: { token: sessionStorage.getItem("token") },

      })

      .then((res) => {
        resolve(res.data);

      })

      .catch((err) => {
        reject(err.data);

      });

  });

}

这个是简单的get封装

export function apiPost(url, params) {
  return new Promise((resolve, reject) => {
    axios({
      method: "post",

      url: url,

      data: params,

    })

      .then((res) => {
        resolve(res.data);

      })

      .catch((err) => {
        reject(err.data);

      });

  });

}

这个是简单的post封装 

然后在mian.js上把这个引入进去可以全局使用了

import { apiGet, apiPost } from "./api/api.js";

Vue.prototype.$apiGet = apiGet;

Vue.prototype.$apiPost = apiPost;

在上面不是写了一个二次封装的吗，我把二次封装的补充一下，

在api下的文件当中在创建一个api.js文档，在文档中写以下内容

先引入你需要的方法名

import { apiGet } from "./index";

 然后使用这个方法

export function getList() {

  return new Promise((resolve) => {

    apiGet("/index.php/index/index/getcode").then((res) => {

      resolve(res);

    });

  });

}

在页面上使用看一下代码

import { getList } from '@/api';

export default {

    data() {

        return {

        }

    },

    created() {

        getList().then(res => {

            console.log(res);

        })

    }

}

 

 好了这个就是一个简单的二次封装