vue axios封装

原创已于 2022-11-18 10:47:33 修改 · 184 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2019-03-08 16:47:20 首次发布

Vue 同时被 2 个专栏收录

14 篇文章

订阅专栏

axios

1 篇文章

订阅专栏

本文详细介绍如何在Vue项目中封装Axios库，包括安装、配置请求与响应拦截器、定义HTTP方法，并将封装后的Axios集成到Vue原型中，以便在项目中便捷地进行API调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步 cnpm install axios

第二步创建个js文件

import axios from 'axios';
import {ElMessage} from 'element-plus';
import router from "../router";

const ContentType = {
  JSON: 'application/json;charset=UTF-8',
  FORM: 'application/x-www-form-urlencoded;charset=UTF-8',
  UPLOAD: 'multipart/form-data',
  STREAM: 'application/octet-stream;charset=UTF-8'
}

axios.defaults.timeout = 5000;
axios.defaults.baseURL = '';


//http request 请求拦截器
axios.interceptors.request.use(
  config => {
    // const token = getCookie('名称');注意使用的时候需要引入cookie方法，推荐js-cookie
    config.data = JSON.stringify(config.data);
    config.headers = {
      'Content-Type': ContentType.JSON
    }
    // if(token){
    //   config.params = {'token':token}
    // }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);


//http res 响应拦截器
axios.interceptors.response.use(
  res => {
    console.log(res);
    if (res.data.code === 200) {
      return res;
    } else {
      let {code, msg} = res.data
      codeHandle(code, msg)
      return Promise.reject(res)
    }
  },
  error => {
    return Promise.reject(error)
  }
)


/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

export function fetch(url, params = {}) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params
    })
      .then(res => {
        resolve(res.data);
      })
      .catch(err => {
        reject(err)
      })
  })
}


/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function post(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.post(url, data)
      .then(res => {
        resolve(res.data);
      }, err => {
        reject(err)
      })
  })
}

/**
 * 封装patch请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function patch(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.patch(url, data)
      .then(res => {
        resolve(res.data);
      }, err => {
        reject(err)
      })
  })
}

/**
 * 封装put请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function put(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.put(url, data)
      .then(res => {
        resolve(res.data);
      }, err => {
        reject(err)
      })
  })
}

/**
 * @description: code处理
 * @param {number} code
 * @param {string} message
 */
const codeHandle = (code, message) => {
  console.log(message);
  switch (code) {
    case 401:
      ElMessage.error(message)
      router.push({
        path: "/login",
        query: { redirect: router.currentRoute.fullPath } // 从哪个页面跳转
      })
      break
    default:
      ElMessage.error(message)
      break
  }
}

第三步

import axios from 'axios'
import {post,get,patch,put} from './utils/http'
//定义全局变量
Vue.prototype.$post=post;
Vue.prototype.$get=get;
Vue.prototype.$patch=patch;
Vue.prototype.$put=put;

第四部这一个主要还是看你的书写习惯，你把所有的接口都放到一个js文件中，这样方便之后接口调试；

export const name = (data) => post(url,data)  // 接口备注

也可以在页面直接调用

import {get} from './config/http'

mounted(){
    this.$get('/api/v2/movie/top250')
      .then((response) => {
        console.log(response)
      })
  },

其余的方法一样