现在很多公司的项目都是前后端分离的项目,那么说到前后端分离,必定会有ajax请求来获得后台的数据。
在做jquery项目的时候,我们都会使用它封装好的方法来直接发起ajax请求。
在vue项目中,我们使用最多的就是axios这个插件,下面就简单的封装下这个插件并且把接口给统一化管理。
一、安装和配置
1.在项目根目录下打开终端安装
npm install axios -S
2.安装完成以后,在src目录下创建utils目录,用来存放用到的所有工具和插件(个人习惯)
3.在utils目录创建request.js文件,用来配置axios,代码如下:
-
import axios from 'axios' //引入axios
-
-
const service = axios.create({
-
// api 的 baseUrl 就是每个请求前面相同的地址,这个地方因为我配置了环境,所以直接取环境里的配置
-
baseURL: process.env.BASE_URL,
-
timeout: 5000 // 请求超时时间
-
})
-
-
// request拦截器
-
service.interceptors.request.use(
-
config => {
-
//这里是每个请求的设置,比如每个请求都携带一个token,或者当为post请求时,引入qs格式化参数。
-
return config
-
},
-
error => {
-
console.log( '请求失败:' + error)
-
Promise.reject(error)
-
}
-
)
-
-
// response 拦截器
-
service.interceptors.response.use(
-
response => {
-
const res = response.data
-
//这个地方的code自己与后台约定(可以根据状态码,设置自己要提示的信息)
-
if (res._code !== '10000') {
-
//在此可以加几种比较普遍的设置,然后可以把单独的返到页面中设置
-
return Promise.reject(res)
-
} else {
-
return response.data
-
}
-
},
-
error => {
-
console.log( '响应失败:' + error)
-
return Promise.reject(error)
-
}
-
)
-
export default service
-
二、使用
1.在src目录下创建api文件夹,api文件夹与页面文件夹目录结构相同,名字最好也其相同语义的名字(个人习惯,方便管理)
2.比如我的页面结构里有个manage目录,里面有个user.vue页面,那么相同的在api目录下,也应有个manage目录,里面有个user.js文件
3.user.js代码如下:
-
//引入配置好的axios
-
import request from '@/utils/request'
-
-
//获取用户列表
-
export const getUserList = params => { return request({ url: '你的接口地址', method: 'get', params }) }
-
-
//增加用户
-
export const addUser = data => { return request({ url: '你的接口地址', method: 'post', data }) }
-
-
//删除用户
-
export const delUser = data => { return request({ url: '你的接口地址', method: 'post', data }) }
-
-
//修改用户信息
-
export const addUserInfo = data => { return request({ url: '你的接口地址', method: 'post', data }) }
-
-
//查询用户详细信息
-
export const getUserDetail = params => { return request({ url: '你的接口地址', method: 'get', params }) }
-
4.user.vue代码如下:
-
<script>
-
import userApi from '@/api/manage/user'
-
export default {
-
name: "User",
-
data(){
-
return {}
-
},
-
created(){
-
//不需要传递参数
-
userApi.getUserList()
-
.then( res => {
-
//成功回调
-
})
-
.catch( err => {
-
//失败回调
-
})
-
//需要传递参数
-
let userInfo = {
-
name: '张三',
-
age: 18
-
}
-
userApi.addUser(userInfo)
-
.then( res => {
-
//成功回调
-
})
-
.catch( err => {
-
//失败回调
-
})
-
}
-
}
-
< /script>
-
有问题欢迎留言指出