菜鸡随笔之aixos篇（一）

简单记录axios配置。

1、npm安装

npm install axios -S

在main.js中注册：

import axios from "axios";
Vue.prototype.$axios = axios;

2、文件创建

（1）utils/request.js。环境变量配置

（2）.env.development  开发环境

（3）.env.production   生产环境

（4）api/xx.js         封装请求

 3、各部分介绍（代码及功能记录）

（1）utils/request.js。环境变量配置

import axios from "axios";

// 创建了axios实例, 使用的是自己的配置项
const service = axios.create({
  // 开发环境, 找 env.development, 找 VUE_APP_BASE_API 变量
  // 生产环境, 找 env.production,  找 VUE_APP_BASE_API 变量
  baseURL: process.env.VUE_APP_BASE_API, // 环境变量
  timeout: 5000 // request timeout
});

// 请求拦截器

// 响应拦截器

export default service;

ps:暂不考虑拦截器

（2）.env.development：  开发环境，用于 npm run serve ，在开发过程中会引用这个文件里面的配置；

VUE_APP_BASE_API = '需要用的api' //ip地址,例 ：http://192.168.x.x:8080

（3）.env.production ：  生产环境，用于 npm run build，打包时会引用这个文件里面的配置，即用于线上环境；

VUE_APP_BASE_API = '需要用的api' //ip地址,例 ：http://192.168.x.x:8080

（4）调用Axios获取数据  

第一种：api/xx.js         封装请求

import request from "@/utils/request";

export function firstApi(data) {
  return request({
    method: "post",
    url: "接口URL", 
    data,
  });
}

调用

import { firstApi } from "@/api/fristApi";

      firstApi().then((res) => {
        console.log(res);
      });

第二种：直接使用

      this.$axios
        .post("接口URL")
        .then((res) => {
          console.log(res);
        });

未完待续.........(?)