概念
axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护。
在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护,直接推荐我们使用axios库
一、封装步骤
1.首先安装axios
npm i axios -S
yarn安装
yarn add axios -S
2.目录创建
在src目录中,新建一个network文件夹,作为我们的网络请求模块,然后在里面新建一个http.js和一个api.js文件和一个request.js。http.js文件用来封装我们的axios,api.js用来统一管理我们的接口url, request.js对外暴露我们放在的api方法。
// 在http.js中引入axios
import axios from 'axios'; // 引入axios
import router from '../router';
// vant的toast提示框组件,大家可根据自己的ui组件更改。
import { Toast } from 'vant';
//element-ui 的loging,和信息提示
import {Loading, Message} from 'element-ui'
3.环境的切换
我们的项目环境可能有开发环境、测试环境和生产环境。我们通过node的环境变量来匹配我们的默认的接口url前缀。axios.defaults.baseURL
可以设置axios
的默认请求地址就不多说了。
创建config
目录。
目录下创建env.development.js+env.production.js+env.test.js
env.development.js
内容如下:
module.exports={
baseUrl:' http://www.devele.com:4456' //开发环境用到的baseurl
}
// 环境的切换
const {baseUrl}=require('../config/env.'+process.env.NODE_ENV);
//同时 package.json的scripts需指定测试环境的模式 --mode test
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test": "vue-cli-service build --mode test",
"lint": "vue-cli-service lint"
}
创建axios实例
const service = axios.create({
baseURL: baseUrl, // url = base api url + request url
withCredentials: false, // send cookies when cross-domain requests //跨域是否携带token
timeout: 1000*12 // 请求超时
})
4.设置请求头
// 设置post请求头
service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
5.请求拦截
我们在发送请求前可以进行一个请求的拦截,为什么要拦截呢,我们拦截请求是用来做什么的呢?比如,有些请求是需要用户登录之后才能访问的,或者post请求的时候,我们需要序列化我们提交的数据。这时候,我们可以在请求被发送之前进行一个拦截,从而进行我们想要的操作。
// 请求拦截器
service.interceptors.request.use(
config => {
// 不传递默认开启loading
if (!config.hideloading) {
// 请求是是否开启loading
Toast.loading({
message: '加载中...',
forbidClick: true,
})
}
// 每次发送请求之前判断vuex中是否存在token
// 如果存在,则统一在http请求的header都加上token,这样后台根据token判断你的登录情况
// 即使本地存在token,也有可能token是过期的,所以在响应拦截器中要对返回状态进行判断
if (store.state.token) {
config.headers.token = store.state.token;
//有些接口是 config.headers.Authorization = token
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
设置响应拦截器
根据服务器返回给我们的数据,我们在拿到之前可以对他进行一些处理。
// 响应拦截器
service.interceptors.response.use(
response => {
// 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据
// 否则的话抛出错误
Toast.clear();
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
// 服务器状态码不是2开头的的情况
// 这里可以跟你们的后台开发人员协商好统一的错误状态码
// 然后根据返回的状态码进行一些操作,例如登录过期提示,错误提示等等
// 下面列举几个常见的操作,其他需求可自行扩展
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面,并携带当前页面的路径
// 在登录成功后返回当前页面,这一步需要在登录页操作。
case 401:
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
break;
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
Toast({
message: '登录过期,请重新登录',
duration: 1000,
forbidClick: true
});
// 清除token
store.dispatch('FedLogOut').then(() => {
// 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面
router.replace({
path: '/login',
query: {
redirect:router.currentRoute.fullPath
}
}) })
break;
// 404请求不存在
case 404:
Toast({
message: '网络请求不存在',
duration: 1500,
forbidClick: true
});
break;
// 其他错误,直接抛出错误提示
default:
Toast({
message: error.response.data.message,
duration: 1500,
forbidClick: true
});
}
return Promise.reject(error.response);
}else {
// 处理断网的情况
// eg:请求超时或断网时,更新state的network状态
// network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
// 关于断网组件中的刷新重新获取数据,会在断网组件中说明
store.commit('changeNetwork', false);
}
});
//最后导出实例
export default service;
最后导出实例,我们的axios就封装好了。
Api封装
将我们封装好的axios导入
import request from ‘./http’; // 导入http中创建的axios实例
import qs from ‘qs’; // 根据需求是否导入qs模块
然后就可以使用我们封装的axios来请求数据
let obj={
getList(){
return request({
url:'/index.json',
method:'get',
params:{},
hideLoading:false
})
}
}
export default obj;//导出obj
在我们需要使用的组件中引入:
<script>
import obj from '../network/api'
//引入
export default {
data() {
return {
sw: []
//接收轮播图数据数组
};
},
mounted() {
//使用obj中用axios封装的方法
obj.getList().then(res=>{
//就可以打印出对应数据
console.log(res);
this.sw=res.data.data.swiperList
})
},
methods: {}
};
</script>
这样只需对应渲染数据即可