- Vue 项目中基于axios封装接口及使用
1.封装一个api.js文件
import axios from "axios";
var loginService = {
/**
* username: 用户名
* password:密码
* checkImage:验证码
*/
login(username,password,checkImage) {
var params = {
"username": username,
"password": password,
"checkImage": checkImage
}
return new Promise((resolve,reject) => {
axios.post(url,params).then( res => {
resolve(res.data)
}).catch(error => {
reject(error)
})
})
}
}
export {
LoginService
}
2.在Vue组件中调用
import { LoginService } from "/api.js";
LoginService.login(user.username, user.password, user.password).then(
(res) => {
if (res.data.code === 200) {
...
} else if (res.data.code === 500) {
...
}
},
(error) => {
...
}
);
3.可以再设置一个拦截器,有两个作用:
- 请求拦截器:所有http请求发起,都会先进入请求拦截器,这里可以做一些统一处理:如对请求添加请求头,设置content-type(参数序列化)等等。
- 响应拦截器:对响应数据做一些处理。
import axios from "axios"
export default function() {
//响应成功
axios.interceptors.request.use(config => {
// 在发送请求之前做些什么
const token = localStorage.fetchToken() //取出token
token ? config.headers.Authorization = token : '' //若存在token令牌,便添加请求头。当token值被移除时,http请求进入后台便会请求失败
config.headers["Content-Type"] = 'application/x-www-form-urlencoded;charset=utf-8' //参数序列化
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});
//这里只关心失败响应
axios.interceptors.response.use(null, error => {
localStorage.removeToken() //移除token
if(error.response.status === 403) {
...
} else if(error.response.status === 404) {
...
} else if(error.response.status === 401) {
...
}
return Promise.reject(error);
})
}