1、安装
npm install axios;
2、在项目目录下引入axios
我直接在src下面建api文件夹，api下面为分装的axios和根据不同模块创建不同的js文件用于管理api接口的service
3、axios.js二次封装
import axios from 'axios';
import { baseURL } from './config.js'
//设置超时时间，单位毫秒
axios.defaults.timeout = 50000;
axios.defaults.baseURL = baseURL;
/* const service = axios.create({
baseURL: baseURL, // api的base_url
timeout: 5000 // 请求超时时间
});
*/
//设置是否允许跨域和是否允许携带凭证，如果该设置为false，请求时不允许携带凭证
// axios.defaults.withCredentials = true;
// 添加超时后的处理（axios中需要你根据error信息来进行判断）
axios().catch(error => {
const { message } = error;
if (error.code === 'ECONNABORTED' && message.indexOf('timeout')> -1){
// 超时处理，可以直接弹出错误或者重新发起一次请求
alert("请求超时！请检查网络问题");
}
// 若不是超时,则返回未错误信息
return Promise.reject(error);
})
//设置请求头
/* axios.defaults.headers["Content-Type"] = " multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW"; */
// 请求拦截器
axios.interceptors.request.use(
config => {
if (localStorage.getItem("token") != null&&
localStorage.getItem("token") != undefined&&
config.url.indexOf('getToken.do') == -1) {
config.headers.Authorization = localStorage.getItem("token")
}
return config;
},
err => Promise.reject(err)
);
// response interceptor
axios.interceptors.response.use(
response => {
// response 根据不同status 状态返回 对应不同的comfirm
const res = response.data
if (res.code === '后端返回的status或者code获取其他状态码') {
// console.log('登录状态已过期')
} else {
return res
}
},
error => {
// console.log('err' + error) // for debug
return Promise.reject(error)
}
)
export default axios
如果报错说不同源则与后台沟通让他允许你的访问
4、config.js
//判断是开发(development)还是生产(production)
export const baseURL = process.env.NODE_ENV == 'development'? 'http://XXXXXXXX.com/':'http://XXXXXXXX.com/'
5、main.js
import axiosApi from './api/axios/axios.js'
Vue.use(axiosApi);
6、login.js
1、url ：请求接口的地址（就是baseURL后面的哪部分）
2、method：请求方法
3、data：post请求中携带的数据（obj格式），params：get请求中携带的数据（就是在浏览器地址xx/xx/xx后面?XX=oo&XX=oo这部分数据，obj格式）
4、传过来的参数一定要在（query）=>{ }括号中引入，函数里面才能用
eg:
import request from '../axios/axios';
// 获取登录页数据接口
export const getApplicInfo = (query) =>{
return request({
url:'baseURL后面的内容',
method:'get',
params:query
})
}
// 登录页接口
export const getLogin = (query) =>{
return request({
url:'',
method:'post',
data:query
})
}
//上传图片
export const uploadPhoto = (query) =>{
return request({
url:'/openApi/upload.do',
method: 'post',
headers:{
'Content-Type':'multipart/form-data'
},
data: query
})
}
7、页面中使用
import {getApplicInfo,getLogin} from '@/api/service/login'
getApplicInfo(query)
.then(res => {
})
.catch(res => {
console.log("网络开小差了，没有获取到图片哦");
})
