什么是axios:
对原生XMLHttpRequest的封装,可用于浏览器和nodejs的HTTP客户端,基于Promise,类似Ajax
怎么安装使用:
npm i axios
引入axios,创建实例,处理错误,拦截器
// 引入axios
import axios from 'axios';
// 创建axios实例
const httpService = axios.create({
// 请求超时时间
timeout: 3000 // 需自定义
});
// request拦截器
httpService.interceptors.request.use(
config => {
console.log(config.url);
return config;
},
error => {
// 请求错误处理
Promise.reject(error);
}
)
// respone拦截器
httpService.interceptors.response.use(
response => {
// 统一处理状态
// const res = response.data;
// if (res.statuscode != 1) {
// // 返回异常
// return Promise.reject({
// status: res.statuscode,
// message: res.message
// });
// } else {
return response.data;
// }
},
// 处理处理
error => {
if (error && error.response) {
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 405:
error.message = '请求方法未允许';
break;
case 408:
error.message = '请求超时';
break;
case 500:
error.message = '服务器端出错';
break;
case 501:
error.message = '网络未实现';
break;
case 502:
error.message = '网络错误';
break;
case 503:
error.message = '服务不可用';
break;
case 504:
error.message = '网络超时';
break;
case 505:
error.message = 'http版本不支持该请求';
break;
default:
error.message = `未知错误${error.response.status}`;
}
} else {
error.message = "连接到服务器失败";
}
return Promise.reject(error);
}
)
axios的请求方式:
axios(config)
axios.request(config)
axios.get(url [,config])
axios.post(url [,data [,config]])
axios.put(url [,data [,config]])
axios.delete(url [,config])
axios.patch(url [,data [,config]])
axios.head(url [,config])
/*网络请求部分*/
/*
* get请求
* url:请求地址
* params:参数
* */
export function get(url, params = {}) {
return new Promise((resolve, reject) => {
httpService({
url: url,
method: 'get',
params: params
// data:params
// query:params
}).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});
}
/*
* post请求
* url:请求地址
* params:参数
* */
export function post(url, params = {}) {
return new Promise((resolve, reject) => {
httpService({
url: url,
method: 'post',
data: params
// params:params
}).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});
}
export function del(url, params = {}) {
return new Promise((resolve, reject) => {
httpService({
url: url,
method: 'delete',
// data: params
params:params
}).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});
}
/*
* put请求
* url:请求地址
* params:参数
* */
export function put(url, params = {}) {
return new Promise((resolve, reject) => {
httpService({
url: url,
method: 'put',
data: params
// params:params
}).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});
}
/*
* 文件上传
* url:请求地址
* params:参数
* */
export function fileUpload(url, params = {}) {
return new Promise((resolve, reject) => {
httpService({
url: url,
method: 'post',
data: params,
headers: { 'Content-Type': 'multipart/form-data' }
}).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});
}
export default {
get,
post,
fileUpload,
del,
put
}
引用并使用:
import request from "@/api/request";
login(){
request.post('/user/login',this.map ).then(res => {
console.log("user")
console.log(res)
if(res.data!=null){
sessionStorage.setItem("user",JSON.stringify(res.data))
this.userLogin()
}else {
alert(res.msg)
}
})
},