vue有几种异步请求方式,官方推荐用AXIOS,那我们也用这个。
本项目中已经引入了,所以不需要自己引入。
怎么引入模块,大家可以百度。
AXIOS在每次请求时,我们可以设置它的请求信息
import axios from 'axios' import {Message, MessageBox} from 'element-ui' import {getToken} from '@/utils/auth' import store from '../store' // 创建axios实例 const service = axios.create({ baseURL: process.env.BASE_URL, // api的base_url timeout: 15000 // 请求超时时间2 }) // request拦截器 service.interceptors.request.use(config => { return config }, error => { // Do something with request error console.error(error) // for debug Promise.reject(error) }) // respone拦截器 service.interceptors.response.use( response => { const res = response.data; if (res.returnCode == '1000') { return res; } if (res.returnCode == '100') { return res.returnData; } else if (res.returnCode == "20011") { Message({ showClose: true, message: res.returnMsg, type: 'error', duration: 500, onClose: () => { store.dispatch('FedLogOut').then(() => { location.reload()// 为了重新实例化vue-router对象 避免bug }) } }); return Promise.reject("未登录") } else { Message({ message: res.returnMsg, type: 'error', duration: 3 * 1000 }) return Promise.reject(res) } }, error => { console.error('err' + error)// for debug Message({ message: error.message, type: 'error', duration: 3 * 1000 }) return Promise.reject(error) } ) export default service
这个是我axios的设置配置脚本,大概意思就是
请求头放我的登陆信息(后面讲到登陆的时候存本地变量),l拦截次请求是参数序列化,
收到服务器返回统一处理,正常返回结果。
在main.js引用
import {default as api} from './utils/api'
Vue.prototype.api = api
我们在代码里调用写法
this.api({ url: "/article/addArticle", method: "post", data: this.tempArticle }).then(() => { this.dialogFormVisible = false })