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请求方式

参考文章

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) )