vue封装axios

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,在需要使用该接口的组建中直接引入即可使用

这样一来,每个组件只做自己所负责的东西,方便修改,管理和维护;