axios如何使用?
- 方式一(简单方便,但是不利于接口维护):我们可以把请求对象挂载到
Vue.prototype
原型对象中,然后在组件中通过this.xxx
直接访问 - 方式二(推荐):我们把每一个请求都封装成每个独立的功能函数,在需要的时候加载调用,这种做法更便于接口的管理和维护
这里使用方式二;便于管理和维护;
1,安装axios
npm i axios
2,创建新文件request.js引入axios
import axios from "axios"
3,在该文件下创建axios实例
const request = axios.create({
baseURL: "http://abcd.com/" // 基础路径
})
4,导出
export default request
在该文件中也可以配置请求拦截器来添加token,以及响应拦截器
配置请求拦截器添加token:
// 请求拦截器
request.interceptors.request.use(
function (config) {
//vuex中的数据
const { user } = store.state;
if (user && user.token) {
config.headers.Authorization = `Bearer ${user.token}`;
}
return config;
},
function (error) {
// 如果报错
return Promise.reject(error);
}
);
此时在其他的组件中就可以调用该实例,然后配置请求方式,具体接口路径,参数,来封装独立的接口;
如下:封装获取用户信息接口
1,导入request
// 导入requset
import request from "@/utils/request";
2,配置接口并导出
export const getUserInfo = () => {
return request({
method: "GET",
url: "/app/v1_0/user",
});
};
3,在需要使用该接口的组建中直接引入即可使用
这样一来,每个组件只做自己所负责的东西,方便修改,管理和维护;