vue项目axios请求封装
目录
-
- 前言
- 一、为什么要封装请求
- 二、创建axios实例并导出
- 三、接口的封装
- 四、接口在页面的调用
- 五、补充内容（跨域请求需配置代理）
前言
此封装没有什么复杂的内容都是一些基本操作，因此较适合小白，复制黏贴即可用。
一、为什么要封装请求
小型的项目是完全可以不封装的，中大型项目非常建议封装一下，有些接口是重复调用的，那样你就需要重复去写，而且当接口修改时，你就需要去找n个调用了这个接口的页面，然后一个个的重复修改，这样是不是很麻烦。如果封装在一个文件里面，那找起来是不是就容易了，对于多次使用的接口，接口的请求写一遍，在使用的页面只需调用就行了。
二、创建axios实例并导出
在src目录下新建一个utils目录，在utils目录下建一个request.js文件
request.js文件内容，默认你已经安装了axios（npm安装指令： npm install axios）
//创建axios实例
import axios from 'axios'
//创建axios实例
const service = axios.create({
//超时时间，这里是5秒
timeout: 5000,
})
// 添加请求拦截器
service.interceptors.request.use(res=> {
//配置请求头
config.headers = {
/*配置请求数据格式Content-Type*/
//传json数据格式给后端，如果后端是这个接收格式，配置如下（可不写，因为axios默认将 JavaScript 对象序列化为 json格式）
'Content-Type':'application/json',
/*
//数据会以普通表单形式（键值对，但不支持文件）发送到后端,如果后端是这个接收格式，配置如下
'Content-Type':'application/x-www-form-urlencoded'
//一般上传文件用此类型，数据是表单上传文件，配置如下（ps一般这种数据类型将在具体的请求接口中配置，而不在此统一封装，后面将介绍）
'Content-Type':'multipart/form-data'
*/
//其他自定义的请求头也可写在这里，比如常见的请求头中携带tooken
}
return res;
}, error =>{
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
service.interceptors.response.use(response=> {
//只返回data中的信息
const resp=response.data;
//文件下载类型，直接返回所有的
if (response.request.responseType == "blob") {
return response;
}
return resp;
}, error => {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
//导入文件
export default service
三、接口的封装
在src下新建目录api，在api下新建自己的接口js文件，我这里新建了user.js这一接口文件
user.js文件内容（ps：同一分类的接口写在同一个js文件这样后续查找将更方便，例如我这里是将用户相关的接口都写在use.js文件下）
import service from "../utils/request.js";
//请求根路径（ps：就是所有请求中，地址中前面不变的那一部分）
const BaseUrl="https://xxxxxxx";
//获取用户信息
export function getUserInfo(params){
return service({
//请求路径
url:`${BaseUrl}/api/user/updateInfo`,
//请求方法
methods:'get',
//数据（ps：此处使用了es6解构的语法，原写法为 params: params）
params
})
}
//修改用户信息
export function updateUserInfo(data){
return service({
url:`${BaseUrl}/api/user/updateInfo`,
methods:'post',
data
})
}
//上传资料文件
export function uploadData (data) {
return service({
url:`${BaseUrl}/api/user/uploadData`,
method: 'post',
//上传表单文件，请求头中Content-Type设置为multipart/form-data，数据类型为表单上传文件
headers: {
"Content-Type": "multipart/form-data"
},
//在向服务器发送前，修改请求数据
// 它只能用于 'PUT', 'POST' 和 'PATCH' 这几个请求方法
//修改请求头也可以，以上就是修改了请求头，因此此处直接返回即可
transformRequest(data) {
//对发送的data进行转换处理
return data;
}
})
}
//下载文件
export function downloadData (params) {
return service({
url:`${BaseUrl}/api/user/downloadData`,
method: 'get',
params,
//设置响应的数据类型，默认为json，其值有：'arraybuffer', 'document', 'json', 'text', 'stream','blob'
//后端返回的是数据流时设置为blob；返回的二进制buffer流时，设置为arraybuffer
responseType: 'blob',
})
}
注意：
以上请求配置中params和data详解
- params数据，url参数形式，即数据将拼接在请求地址中，所以它必须是一个简单对象
- data数据，以请求体的形式发送该数据，注意仅适用 ‘PUT’, ‘POST’, 'DELETE 和 ‘PATCH’ 请求方法
四、接口在页面的调用
<script>
//引入抛出的接口（用哪个接口就引入哪个）
import { getUserInfo, updateUserInfo } from "../api/user.js"
export default {
data() {
return {
}
},
created() {
this.uerInfo();
},
methods:{
uerInfo(){
let option={
userId:"2022015602"
}
//接口调用
getUserInfo(option).then(res=>{
//后端返回的数据
console.log(res)
})
},
update(){
let uerInfo={
userId:"2022015602",
userName:"张三",
age:18
}
//接口调用
updateUserInfo(uerInfo).then(res=>{
//后端返回的数据
console.log(res)
})
}
}
}
</script>
五、补充内容（跨域请求需配置代理）
使用vueCli 3构建的vue项目，需要在项目根目录新建vue.config.js文件
vue.config.js文件内容
var path = require('path');
module.exports = {
outputdir:"myPackage", //打包后生成的文件夹名称，默认dist
devServer:{
host: localhost , //前端地址
port: 8080, //前段的端口号
proxy：{
'/api': {
target: 'http://xx.xxx.xx.xx:3000',//后端接口地址
changeOrigin: true, //是否允许跨域
pathRewrite: {
'^/api': '' //注册全局路径
}
},
}
}
};