Axios ,是一个基于promise 的网络请求库,作用于node.js和浏览器中,它是 isomorphic 的。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。Axios就是用于发送get、post等请示的。
vue项目使用组件前先引入依赖(注意:axios对node版本有要求,如果最新版本axios报错,可以降低axios版本)
引入依赖:
npm install --save axios
卸载依赖:
npm uninstall --save axios
新增一个js文件来封装axios,在vue项目新增文件夹utils,js文件request.js
request.js文件内容如下:
import axios from 'axios'
import { Message } from 'element-ui'
//定义服务发送地址
let baseURL = 'http://localhost:8090'
//定义axios请求
const service = axios.create({
baseURL: baseURL,
timeout: 1* 60 * 60 * 1000 //定义超时时间
})
//请示拦截器(请示之前)
service.interceptors.request.use(
error => {
config.log(error)
Promise.reject(error)
}
)
//请示拦截器(请示之后)
service.interceptors.response.use(
response =>{
const status = response.status
switch (status) {
case 400:
Message({
message: response.message,
type: 'error',
duration: 5 * 1000,
offset: 80,
showClose: true
})
break
}
return response
},
//定义错误信息
error => {
if(error.message.includes('timeout')) {
error.message = '请示超时'
return _relogin(error)
}
if(!error.response){
if(error.config.timeout == 10800000) return Promise.resolve()
error.message = '与服务器通讯失败'
return _relogin(error)
}
switch(error.response.status){
case 400:
error.message = '操作失败,数据有误'
break
case 401:
error.message = '登录超时'
break
case 403:
error.message = '拒绝访问'
break
case 404:
error.message = '未找到对应服务'
break
case 408:
error.message = '请示超时'
break
case 500:
error.message = error.response.data.message
break
case 501:
error.message = '服务未实现'
break
case 502:
error.message = '网络错误'
break
case 503:
error.message = '服务不可用'
return _relogin(error)
case 504:
error.message = '网络超时'
return _relogin(error)
case 505:
error.message = 'http版本不受支持'
break
default:
error.message = '连接出错'
}
Message({
message: error.message,
duration: 5 * 1000,
type: 'error',
offset: 80,
showClose: true
})
return Promise.reject(error)
}
)
export default service
再新增http.js文件,用于封装get、post请求
http.js文件内容如下:
import request from '@/utils/request'
export function get(path, query) {
return request({
url: '/api' + path,
method: 'get',
params: query
})
}
export function post(path, data) {
return request({
url: '/api' + path,
method: 'post',
data
})
}
export function put(path, data) {
return request({
url: '/api' + path,
method: 'put',
data
})
}
完成以上封装后,使用方法
import { post } from ‘@/api/http’ //在文件中引入http.js文件
post(‘/****/***后台方法路径’, 请求参数).then(response => {})