新起一个vue框架封，怎么封装axios

1：安装axios  命令（npm install axios ）

2：在main.js中引入

 

3：在src下可以新建一个api 可以自己封装一个axios  类似以下代码 我贴出来了

/* 1.引入文件 */

用到post请求时，需要安装qs

import axios from "axios"; //引入 axios库

import qs from "qs"; //引入 node中自带的qs模块（数据格式转换）

/* 2.全局默认配置 */

let baseURL;

// 判断开发环境（一般用于本地代理）

if (process.env.NODE_ENV === "development") {

  // 开发环境

  baseURL = ""; // 你设置的本地代理请求（跨域代理），下文会详细介绍怎么进行跨域代理

} else {

  // 编译环境

  if (process.env.type === "test") {

    // 测试环境

    baseURL = "http://sw.apitest.com";

  } else {

    // 正式环境

    baseURL = "http://sw.api.com";

  }

}

// 配置axios的属性

axios.defaults.timeout = 6000; // 请求超时时间1分钟

axios.defaults.baseURL = 'http://192.168.31.151:9001/'; // 你的接口地址

axios.defaults.responseType = "json";

axios.defaults.withCredentials = false; //是否允许带cookie这些

/*你也可以创建一个实例，然后在实例中配置相关属性，此方法和上面的方法一样，写法不同，怎么用随个人

 *喜好，我比较喜欢用这种方法，如下：

 */

const Axios = axios.create({

  baseURL: baseURL, // 后台服务地址

  timeout: 60000, // 请求超时时间1分钟

  responseType: "json",

  withCredentials: false, // 是否允许带cookie这些

});

/* 3.设置拦截器 */

/*如果不是用创建实例的方式配置，那么下面的Axios都要换成axios,也就是文件开头你用import引入axios

时定义的变量*/

Axios.interceptors.request.use(

  (config) => {

    //发送请求前进行拦截

    //  可在此处配置请求头信息

    config.headers["appkey"] = "...";

    config.headers["token"] = "...";

    if (config.method == "post") {

      /*数据转换: axios post方式默认是json格式提交数据，如果使用application/x-www-form-urlencoded数据格式提交，要用qs.stringify()进行转换,个人建议不在拦截器中全局配置，因为不够灵活，还有一点是，如果

设置了重新请求的配置，那么重新请求时，请求体中的config里面的传参就会被再次进行qs.stringify()转

换，会使得参数丢失，造成请求失败。*/

      // config.data = qs.stringify(config.data);

    }

    return config;

  },

  (error) => {

    //console.log("错误的传参", 'fail');

    return Promise.reject(error);

  }

);

Axios.interceptors.response.use(

  (res) => {

    //请求响应后拦截

    if (res.status == 200) {

      // 对响应数据做些事

      //alert("提交成功")

      return Promise.resolve(res);

    }

    return res;

  },

  (error) => {

    //alert("网络异常!") 404等问题可以在这里处理

    return Promise.reject(error);

  }

);

export default Axios;

4：新建index.js  引入自己封装axios

import Axios from "./axios"; // 导入配置好的axios文件

以下就是未封装的post请求

export function 方法名(datas) {

  return Axios({

    url: "/目标url地址",

    method: "post",

    headers: {

       "Content-Type": "application/json", //设置请求头请求格式为json

    },

    data: datas,

  });

}

5：在需要用到的页面引入即可

import {'方法名'} from "@/api/index";