如何封装VUE的axios请求

index.js

/* eslint-disable */
// 对axios做封装,  封装get post
const axios = require('axios');
// import qs from 'qs'
axios.defaults.baseURL = 'http://127.0.0.1:8000';
axios.defaults.timeout = 10000;
axios.defaults.withCredentials = true;

/**
 * 设置请求传递数据的格式(看服务器要求的格式)
 * x-www-form-urlencoded
 * 默认提交表单
 * 把数据对象序列化成 表单数据
 */
// axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
// axios.defaults.transformRequest = data => qs.stringify(data);

/**
 * 设置默认提交 json
 * 把数据对象序列化成 json 字符串
 */
axios.defaults.headers['Content-Type'] = 'application/json';
axios.defaults.transformRequest = data => JSON.stringify(data);


/**
 * 请求拦截器
 */
axios.interceptors.request.use(config => {
  // 从localStorage中获取token
  let token = localStorage.getItem('token');
  // 如果有token, 就把token设置到请求头中Authorization字段中
  token && (config.headers.Authorization = token);
  return config;
}, error => {
  return Promise.reject(error);
});

/**
 * 响应拦截器
 */
axios.interceptors.response.use(response => {
  // 当响应码是 2xx 的情况, 进入这里
  // debugger
  return response.data;
}, error => {
  // 当响应码不是 2xx 的情况, 进入这里
  // debugger
  return error
});
/**
 * get方法,对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get(url, params, headers) {
  return new Promise((resolve, reject) => {
    axios.get(url, { params, headers }).then(res => {
      resolve(res)
    }).catch(err => {
      reject(err.data)
    })
  })
}

/**
 * post方法,对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 **/
export function post(url, params, headers) {
  return new Promise((resolve, reject) => {
    axios.post(url, params, headers).then((res) => {
      resolve(res)
    }).catch((err) => {
      // debugger
      reject(err)
    })
  })
}

export function put(url, params, headers) {
  return new Promise((resolve, reject) => {
    axios.put(url, params, headers).then((res) => {
      resolve(res)
    }).catch((err) => {
      // debugger
      reject(err)
    })
  })
}
export function del(url, params, headers) {
  return new Promise((resolve, reject) => {
    axios.delete(url, { data: params, headers }).then((res) => {
      resolve(res)
    }).catch((err) => {
      // debugger
      reject(err)
    })
  })
}
export default axios;

调用 apis.js

/* eslint-disable */
// 接口信息, 生成请求方法
// 引入 get方法, post方法
import axios, { get, post,put,del } from './index'

export const getBooks = (params, headers) => get("/user/bookinfo/", params, headers)

export const addBook = (params, headers) => post("/user/bookinfo/", params, headers)

export const editBook = (params, headers) => put("/user/bookinfo/", params, headers)

export const delBook = (params, headers) => del("/user/bookinfo/", params, headers)
原文地址:https://www.cnblogs.com/bronyaa/p/12766580.html