1.下载axios
npm install axios
2.创建request.js文件
目录:src/utils/request.js
//request.js文件
import axios from "axios";
//创建实例 这里设置baseURL是为了统一接口在vue.config.js里面做代理
const http = axios.create({
baseURL: '/api',
timeout: 1000,
headers: {
'Content-Type': 'application/json'
}
});
// 添加请求拦截器
http.interceptors.request.use(function (config) {
// 在发送请求之前做些什么 一般都在请求之前加上token在我们的Authorization里面
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
http.interceptors.response.use(function (response) {
// 对响应数据做点什么 响应拦截一般都是对响应数据进行一个返回可以返回response.data具体情况看你们的数据格式
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
export default http
3.接口封装
为了接口统一管理我们一般都是在src/api文件夹下面创建接口文件
例如:exampleApi.js
import http from "@/utils/request";
import qs from 'qs'
// 实例POST接口
export function examplePost (data) {
return http.request({
url: '/api/examplePost',
method: 'POST',
data
})
}
// 实例GET接口
export function examplePostGet(data) {
return http.request({
url: '/api/examplePostGet?'+qs.stringify(data),
method: 'GET',
})
}
其中的qs模块就是对请求参数的一个格式化 它可以将我们的参数自动拼接到url中
例如:
参数
data:{
name:'sanmu',
age:13,
sex:'男',
clazz:'三年级二班'
}
当你使用
str = qs.stringify(data)
返回的数据就是 str 就是 name=sanmu&age=13&sex=男&clazz=三年级二班
这样
4.页面使用
//哪个页面使用哪个页面引入
<script>
import { examplePost,examplePostGet } from "@/api/exampleApi"
export default {
methods: {
textFn() {
examplePost({ text: '测试参数' }).then(res => {
console.log(res);
})
}
},
}
</script>