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错误，并重新跳入登页重新获取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>

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

vue 封装 axios 请求相关推荐

axios队列 vue_(十三 )Vue 封装axios(四种请求)及相关介绍
Vue 封装axios(四种请求)及相关介绍首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...
封装 axios 请求
vue 封装 js 方法一.安装 axios 并引入: Axios 中文说明安装axios:npm install axios 因为基本上全局都会使用到 axios 方法,所以在 main.js ...
解决在vue中axios请求超时的问题
解决在vue中axios请求超时的问题参考文章: (1)解决在vue中axios请求超时的问题 (2)https://www.cnblogs.com/zhouyangla/p/8757149.htm ...
vue中axios请求的封装
axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库:封装axios,一方面为了以后维护方便,另一方面也可以 ...
axios请求接口http_超级简单好用的 Vue封装axios
简述Axios Axios 是一个基于 promise 的 HTTP 库,简单的讲就是可以发送get.post请求.说到get.post, 项目比较大的时候可以使用axios来统一管理请求方式和接口 ...
VUE 之 AXIOS请求
AXIOS介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. axios是我们在vue项目中常见封装http请求相对受欢迎的,优点如下: 简单易用, ...
vue中axios请求拦截、响应拦截的配置
1.在vue项目的 src/ 文件夹下新建一个文件夹为 plugins,然后在 plugins/ 下新建 axios.js 文件,写入如下代码 import axios from 'axios' im ...
vue项目封装axios请求
目录: 一,src/utils/request.js import axios from 'axios' import { getToken } from '@/utils/auth' import ...
vue封装axios接口
一.安装axios axios安装命令:cnpm install axios 二.在文件中引用axios 一开始我是放在src下的main.js这个文件里面,后来发现mounted钩子读取接口方法为u ...

vue 封装 axios 请求

vue 封装 axios 请求相关推荐

最新文章

热门文章