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文件封装好的接口方法
<template>
<div id="app">
axios 进一步封装(拦截器)
</div>
</template>
<script>
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()
}
}
</script>
上面写了两个用法, 大家使用的时候记得替换接口地址和接口名!!!
