如何封装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)
posted @   Bronya天使  阅读(248)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· DeepSeek火爆全网,官网宕机?本地部署一个随便玩「LLM探索」
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 上周热点回顾(1.20-1.26)
点击右上角即可分享
微信分享提示