1、简介
系统中关于请求使用axios实现,axios是一个基于 promise 的 HTTP 库,类似ajax,进行前后端对接的时候,使用这个工具可以提高我们的开发效率
官网:axios中文网|axios API 中文文档 | axios
2、安装
cnpm install axios --save
3、封装request工具
为了方便使用 我们可以基于axios封装请求模块request.js,这样方便使用
import axios from 'axios' /** * 创建一个axios实列,这个实列和axios本身功能一摸一样 * 相应的配置给这个实列,这个实例,可以多个 每个实例单独使用,比如设置不同的baseUr, * 而不建议在main.js中直接axios.defaults.baseURL = "xxx" */ const requst = axios.create({ timeout:5000, baseURL:'http://xxxx' }) /** * 请求拦截 * config是请求相关配置 任何请求都经过这里,这里处理统一业务 比如设置token */ requst.interceptors.request.use(config=>{ const token = window.localStorage.getItem("token"); if (token) { config.headers.token = token } return config }) /** * 响应拦截 * response响应成功 正常处理 * error响应失败 */ requst.interceptors.response.use(response => { let res = response.data if (res.code === 200) { return response } else if (res.code === 201) { Element.Message.error('请登录') router.push("/login") return Promise.reject(response.data.msg) } else { Element.Message.error(!res.msg ? '系统异常' : res.msg) return Promise.reject(response.data.msg) } }, error => { Element.Message.error('系统异常') return Promise.reject(error) /** * 导出 */ export default requst
4、请求api
get请求方式
/**get请求的几种方式,不用考虑content-type,服务端注意接受的时候不要用@RequestBody,
直接实体或者参数列表接受即可/
无参 axios.get('/url') axios({ methods: 'get', url: '/ulr' }) 有参数 axios.get('/url?id='+id) axios.get('/url/123') axios.get('/url', {params: {id: 12}})//请求的地址实际为 localhost:8080/url?id=12 axios({ methods: 'get', url: 'url', params: { id:12 } })
post请求方式
参考文章
谈谈axios配置请求头content-type - pubdreamcc - 博客园
1、post以json格式提交数据(默认就是json格式提交数据)
let data = {} let config = {} 方式一: axios.post('/url',data,config) 方式二: axios({ methods: 'post', url: '/url', data: data, config: config })
2、post以form表单方式提交内容
request.post('/login',qs.stringify(params) )