vue 封装 axios 请求

需求：向后端请求拿数据
好处：把所有的请求方法放在一个文件夹里面，方便优化

先把 axios 安装起

npm install axios --save

接下来按照步骤走吧 go go go~

1、在src路径下建http文件夹 并且创建 api.js env.js request.js 这三个文件

2、 在 env.js 文件
作用：封装我们的公共地址

export default {
    // 开发环境
    dev: {
        baseUrl: "开发环境公共地址"
    },
    //线上接口
    prod: {
        baseUrl: "线上环境公共地址"
    }
};

3、在 request.js 文件
作用：创建 axios 以及封装请求拦截和相应拦截

import axios from "axios";  //引入axios
import env from "./env"; 

// 创建axios实例
const service = axios.create({
	//这里拿线上接口测试
	baseUrl: env.prod.baseUrl,
    headers:{ //请求头
        'Content-Type': 'application/json;charset=UTF-8',
    },
    settimeout:50000,//超时时间
});
// 请求拦截器
service.interceptors.request.use(
config => {
    // 在发送请求之前做些什么 验证token之类的
    // console.log("请求的数据:", config);
    if (localStorage.getItem('token')) {
      config.headers.token = localStorage.getItem('token')
    }
    return config; //记得一定要 返回config
},
error => {
    // 对请求错误做些什么
    // console.log("请求的数据:", error);
    return Promise.reject(error);
}
);
 
// 响应拦截器
service.interceptors.response.use(
response => {
    // console.log("返回的数据", response);
    // 这里拦截401错误，并重新跳入登页重新获取token
    if (response.status && response.status === 200) {
      // 通讯成功
      if (response.data.code === 0) {
        return response.data
      } else if (response.data.code === 401) { 
        // 如果是token过期，跳转至登录
        this.$message.error("登录已过期，请重新登录！");
        localStorage.removeItem('token') // 移除token，跳转至登录
        router.push({ 
          path: '/Login'
        })
      }
      return Promise.resolve(response.data)
    }
},
error => {
    // 对响应错误做点什么
    return Promise.reject(error);
}
);
export default service;

4、 在 api.js 文件
作用：主要是需要的接口地址

// ====== 方法1：把所有请求的地址封装成一个方法，好处就是有个归总 ======
//引入request.js文件
import request from "./request";
 
// 轮播
export function getBanners(data) {
    return request({
        url: "/banner", // 这个地址是去掉公共地址剩下的地址
        method: "GET", // 请求方式 支持多种方式  get post put delete 等等
        data //发送请求要配置的参数 无参数的情况下也可以不写
    });
}


// ====== 方法2：直接挂载到全局 ======
//把request.js文件引入到main.js中
import http from "./request";

Vue.prototype.$http = http;

// 最后是在页面中的引用:
this.$http.post('/getuser/user',这里填参数).then((res) => {
          console.log(res);
        }).catch((err) => {
          console.log(err);
        });

5、 最后是在页面中的引用
那个页面需要请求数据 就引入相应的方法 比如我的首页需要引入 轮播

<script>
// 1.引入需要的接口
import { getBanners } from "../http/api";

export default {
  name: "Home",
  components: {},
  methods: {
      //2.直接使用 .then 是请求成功的回调 .catch是请求失败的回调
      getUser(){
          getBanners('有参数就填这里，没有参数就空着').then((res) => {
            console.log(res);
          }).catch((err) => {
              console.log(err);
          });
      }
  }
};
</script>

大功告成，小女子告辞 ~~~