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"; //引入axiosimport 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错误，并重新跳入登页重新获取tokenif (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>

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