vue项目中 axios 的二次封装 (添加拦截器)

2024-05-21 02:29| 来源: 网络整理| 查看: 265

1. 安装和使用

执行安装命令 npm i axios -S 在 mian.js 中引入 import axios from 'axios' Vue.prototype.$axiso = axios 创建 .env.development 文件, 存放本地接口地址 VUE_APP_BASE_API = 'http://localhost:8081/api/' 创建 .env.production 文件, 存放正式接口地址 VUE_APP_BASE_API = 'https://xxxxxx:8081/api/' 设置好接口地址后, 可以通过 process.env.VUE_APP_BASE_API 直接获取

最基本的使用我这里就不讲了, 下面直接来看二次封装吧 2. 二次封装和使用

在 src 目录下, 新建 api 目录, 创建 axios.js 文件 axios.js 文件是用来封装 axios 的 // 二次封装 axios (拦截器) import axios from "axios"; // 借助 qs 将对象进行序列化 import qs from 'qs' // baseURL 不可写错 const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 5000 }) service.interceptors.request.use((config) => { /* 发送请求时, 需要做的事 */ // 设置请求头信息, 例如 token config.headers['authorization'] = window.sessionStorage.getItem('A ccToken') // 当请求类型为 get 时, 则将参数拼接 if(config.method === 'get') { config.params = config.data } // 当请求类型为 post 时, 按后端需要, 转成需要的类型 (这里转为 formData 格式) if(config.method === 'post') { // 具体传参类型, 根据后端接口要求进行设置 // 参数类型为 formData 格式时, 设置 Content-Type 为 application/x-www-form-urlencoded config.headers['Content-Type'] = 'application/x-www-form-urlencoded' config.data = qs.stringify(config.data) } return config; }, (error) => { return Promise.reject(error); }) service.interceptors.response.use((response) => { // 接口响应时需要做的事 let res = response.data if(res.code !== 200) { alert('请求出错!') return Promise.reject(new Error('后台返回的msg提示' || 'Error')) } else { return Promise.resolve(res) } }, (error) => { alert('网络错误!') return Promise.reject(error) }) export default service 再创建 requrst.js 文件, 里面是对请求接口的方法进行封装 import requestApi from './axios' // 封装请求接口 export const requestMethods = (url, type, data) => { return requestApi({ url: url, method: type, data: data }) } 封装完成, 我们下面就来看如何使用吧, 在需要使用的页面引入在 request.js文件封装好的接口方法 axios 进一步封装(拦截器) import { requestMethods } from './api/request.js' export default { name: 'App', data() { return { } }, methods: { /* 异步请求数据注: 使用 async 和 await 请求接口时, 需要用 try {} catch(err) {} 捕获异常 */ async getData() { let param = { name: 'cy', pass: '123' } // get 请求 try{ let getRes = await requestMethods('/getHomeInfo', 'get', param) console.log(getRes) } catch(err) { // 通过 err.message 获取到错误信息 console.log(err.message) } // post 请求 try{ let postRes = await requestMethods('/getMoodList', 'post', param) console.log(postRes) } catch(err) { // 通过 err.message 获取到错误信息 console.log(err.message) } }, // 非异步请求 getResult() { let param = { name: 'cy', pass: '123' } // get 请求 requestMethods('/getHomeInfo', 'get', param).then((res) => { console.log(res) }).catch((err) => { console.log(err.message) }) // post 请求 requestMethods('/getMoodList', 'post', param).then((res) => { console.log(res) }).catch((err) => { console.log(err.message) }) } }, mounted() { // 存入 token window.sessionStorage.setItem('AccToken', 'Kf0DxofLeKr52qP79IXSHQ==') // 调用请求接口方法 // this.getData() // this.getResult() } }

上面写了两个用法, 大家使用的时候记得替换接口地址和接口名!!!

附上源码 https://github.com/chenyanNc/axios-interceptors.git

【本文地址】

公司简介

联系我们