axios说明
Axios是一个基于 promise 的http库,可以用在浏览器和 node.js 中,
axios的封装和api接口的统一管理,其实主要的目的就是帮助我们简化代码和有利于后期的更新维护,
在vue项目中,和后台获取数据这块,我们通常使用的是axios库,他是基于promise的http库,可运行在浏览器和node.js中,他有很多的特性,比如拦截请求和相应请求等等.......
axios封装
安装
cnpm install axios --save //安装axios
npm install qs
创建项目
一般我会在项目的src目录中,新建一个reques.js文件夹,作为我们的网络请求模块,然后再里面新建一个http.js和一个reques.js,http.js文件用来封装我们的axios,api.js用来统一管理我们的接口url,reques.js对外暴露我们放在的api方法
// 在http.js中引入axios
import axios from 'axios'; // 引入axios
import router from '../router';
// vant的toast提示框组件,大家可根据自己的ui组件更改。
import { Toast } from 'vant';
环境切换
我们的项目环境可能有开发环境,测试环境和生产环境,我们通过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"
}
const service = axios.create({
baseURL: baseUrl, // url = base api url + request url
withCredentials: false, // send cookies when cross-domain requests
timeout: 1000*12 // 请求超时
})
如上 设置请求超时
通过axios.defaults.timeout 设置默认的请求超时时间,例如超过了10s,就会提示用户当前请求超时,请刷新等等....
post请求头的设置问题
post请求的时候,我们需要加上一个请求头,所以在这进行一个默认的设置,既设置post的请求头为application/x-www-form-urlencoded;charset=UTF-8
// 设置post请求头
service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
相应拦截
相应拦截器很好理解的,就是服务器返回给我们的数据,我们在拿到之前可以对他进行一些处理,比如上面的思想:如果后台返回的状态码是200,则正常返回数据,否则的根据错误的状态码类型进行一些我们需要的错误,其实这里主要就是进行了错误的统一处理和没登录或登录过期后的调整的操作
// 响应拦截器
service.interceptors.response.use(
response => {
// 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据
// 否则的话抛出错误
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;
api,接口统一管理
新建一个api文件夹,里面有一个index.js,以及多个根据模块分化的接口js文件,index.js是一个api的出口,其他js则用来管理各个模块的接口
比如下面的article.js
/**
* article模块接口列表
*/
import request from '@/network/http'; // 导入http中创建的axios实例
import qs from 'qs'; // 根据需求是否导入qs模块
const article = {
// 新闻列表
articleList () {
return request({
url: '/artical',
method: 'get',
params,
hideloading: false //设置不隐藏加载loading
})
},
// 新闻详情,演示
articleDetail (id, params) {
return request({
url: '/detail',
method: 'get',
params:{
goodsId
},
hideloading: true
})
},
// post提交
login (data) {
return request({
url:'/adduser',
method:'post',
data:qs.stringify(data), //注意post提交用data参数
hideloading: true
})
}
// 其他接口…………
}
export default article;
index.js代码
/**
* api接口的统一出口
*/
// 文章模块接口
import article from '@/api/article';
// 其他模块的接口……
// 导出接口
export default {
article,
// ……
}
在组件中的使用(按需导入)
import {article} from '@/api/index'
created(){
article.articleList().then(info=>{
if(info.code==200)
this.num=info.data
}
})
}
api挂载到vue.prototype上省去引入的步骤
为了方便api的调用,我们将需要将其挂载到vue的原型上,在main.js中
import Vue from 'vue'
import App from './App'
import router from './router' // 导入路由文件
import store from './store' // 导入vuex文件
import api from './api' // 导入api接口
Vue.prototype.$api = api; // 将api挂载到vue的原型上复制代码
然后我们在组件中可以这样使用
//无需导入
methods: {
onLoad(id) {
this.$api.article.articleDetail(id, {
api: 123
}).then(res=> {
// 执行某些操作
})
}
}