axios
axios
是Vue工程化开发项目中很流行的一款ajax请求插件,内置了POST
,GET
请求,极大的减少了前端开发工程师的代码量。即便如此,但如果是开发比较大的项目的话,还是很繁琐的,本文讲述了关于企业级项目开发,对axios
请求的封装
为什么要对axios封装
可以更方便的管理和修改axios请求域名,假设是一个庞大的项目,只是修改域名就会花费很多的时间和精力,如果对axios进行了封装,便省去了很多的步骤。
首先
再开始之前,先安装axios
和qs
插件
在src目录创建一个utils文件夹,里面创建一个request.js
文件,文件完整内容如下
//导入axios 和 qs 插件
import axios from "axios"
import qs from "qs"
//配置全局公共域名
const baseURL = process.env.NODE_ENV === "production" ? "https://www.xxxxx.com" : "";
//创建axios实例
let request = axios.create({
baseURL:baseURL, //赋值公共域名
timeout:5000 //设置延迟时间(单位:毫秒)
})
//拦截request的发送请求和响应请求,并做一定的配置
request.interceptors.request.use(
//拦截发送请求,并给请求头信息headers加上token令牌
config=>{
config.headers.token = localStorage.getItem("token");
return config
},
err=>{
Promise.reject(err)
}
)
request.interceptors.response.use(
//拦截响应请求 , 这里直接返回数据
res=>{
return res;
},
err=>{
Promise.reject(err)
}
)
//给axios实例对象request添加postURL方法
request.postURL = function(url,data,option={}){
//返回一个promise,实现异步处理
return new Promise(function(resolve,reject){
request({
url:url,
method:"POST",
data:qs.stringify(data),
...option,
headers:{"Content-Type":"application/x-www-form-urlencoded; charset=UTF-8",...option.headers}
})
.then(res=>resolve(res))
.catch(err=>reject(err))
})
}
//导出request
export default request;
这一顿操作之后,请求配置文件就算是编写好了。
接下来
在src目录下创建api文件夹,创建user.js
文件,在里面编写请求数据接口的方法,文件内容如下(因为是测试,只编写了几个方法):
//导入请求配置文件
import request from "@/utils/request.js"
//定义接口
//登录
let login = function(data){
return request.postURL("/member/xxxx",data)
}
//注册
let register = function(data){
return request.postURL("/member/xxxx",data)
}
//注销
let exit = function(data){
return request.postURL("/member/xxxx",data)
}
//获取用户信息
let getUser = function(data){
return request.get("/member/xxxx",data)
}
export {
login,
register,
exit,
getUser,
}
在使用的时候可以在组件里做如下操作
//导入登录的方法
import {login} from "@/api/user.js"
login(登录信息)
.then(res=>{
console.log(res)
})
.catch(err=>{
console.log(err)
})
进行了这样的封装之后,如果后期公司项目需要更换或者是修改域名,可以直接在request.js
文件里修改 const baseURL = process.env.NODE_ENV === "production" ? "https://www.xxxx.com" : "";
即全局修改域名