axios封装接口请求

1.npm安装axios（网上教程搜一搜）。

2.新建request.js文件。

import axios from 'axios'
axios.defaults.baseURL = 'https://xxx:8080';//接口请求地址
axios.defaults.timeout = 10000;
axios.defaults.withCredentials = true;
axios.defaults.headers.post['Content-Type']= 'application/x-www-form-urlencoded;charset=utf-8'; //post请求头
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; //默认异步请求
//请求拦截器
axios.interceptors.request.use(
request => {
//if (sessionStorage.sign) {
// request.headers.sign = sessionStorage.sign; //sign判断，没有的可以不加。
//}
return request;
},
error => {
return Promise.reject(error);
}
)
//响应拦截器
axios.interceptors.response.use(
response => {
if (response.status == 200) {
const code = response.data.code;
const msg = response.data.msg;
if (code == 1) { //条件判断，自行和后端商量定义
return Promise.resolve(response.data);
} else if (code == 400) {
//自定义处理
} else {
//错误处理
}
} else {
return Promise.reject(response.data);
}
},
error => {
if (!error.response) {
//Message.error({
// message: '后端接口响应失败，请刷新浏览器重试。'
// });
return Promise.reject(error)
} else {
//跳转错误页面
}
}
)
export default axios

3.新建接口文件login.js //名称自己定义,建在services文件夹里

import request from '../utils/request.js'
const baseUrl = '/...';
async function _login(body){
return request.post(baseUrl+"/login",body)//接口名称
}
export default{
_login,
}

4.新建index.js//建在services文件夹

import login from "./login";
//...
export default{
login,
//...
}

5.在main.js里添加，全局注册

import axios from 'axios';
import apiServer from './services' //apiServer自定义名称
Vue.prototype.$axios = axios;
Vue.prototype.apiServer = apiServer;

6.页面应用

this.apiServer.login._login(...//参数).then(res=>{...//结果处理});