3、vue-cli3项目 axios封装

1、首先安装axios

• npm install axios 2、在项目src目录下创建utils文件夹-->再创建request.js文件

3、封装常用方法

//文件内引入axios
import axios from "axios";
//注册一个axios实例 设置baseUrl和请求超时时间
let instance = axios.create({
  baseUrl: "",
  timeout: 1000 * 60,
});

//封装get方法
instance.gets = (url, params) => {
  return new Promise((resolve, reject) => {
    instance
      .get(url, {
        params,
      })
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        reject(err);
      });
  });
};
//封装post方法
instance.posts = (url, params) => {
  return new Promise((resolve, reject) => {
    instance
      .post(url, params)
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        reject(err);
      });
  });
};
//封装put方法
instance.puts = (url, params) => {
  return new Promise((resolve, reject) => {
    instance
      .put(url, params)
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        reject(err);
      });
  });
};
export default instance;

4、创建api管理js文件,调用以上封装好的方法

// 登录页面相关
import http from "../utils/request.js";
// 可以把常api全部抽取到此处方便维护
let api = {
  url: "",
};
// 登录方法
export function login(data) {
  return http.gets(api.url, data);
}

5、页面调用请求方法

6、请求响应、请求拦截

• 完善代码,可以在utils->request.js文件下添加
• 可以根据业务需求增加加载动画、token等等

let token = "";
// 请求拦截器
instance.interceptors.request.use((config) => {
  config.headers.common["Authorization"] = "Bearer " + token;
});
//响应拦截器
instance.interceptors.response.use((res) => {
  console.log(res);
});