关于在vue中进行axios封装

（1）对于基本的axios，咱们一般都是script下面写请求，这一写就是写一大串，写多了就感觉很烦（2）那就要进行一个封装-------- 先在vue的项目中咱们新建一个utils文件,在这个文件中书写 request.jsimport axios from "axios";// 创建axios实例const instance = axios.create({baseURL: "http://1

maowei-2001

332人浏览 · 2022-05-31 19:40:24

maowei-2001 · 2022-05-31 19:40:24 发布

（1）对于基本的axios，咱们一般都是script下面写请求，这一写就是写一大串，写多了就感觉很烦

（2）那就要进行一个封装

-------- 先在vue的项目中咱们新建一个utils文件,在这个文件中书写 request.js

import axios from "axios";

// 创建axios实例
const instance = axios.create({
  baseURL: "http://localhost:3000/",
  // 设置相应的时间
  timeout: 1000,
});

// 请求拦截器
instance.interceptors.request.use(
  function (config) {
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);

// 响应式拦截器
instance.interceptors.response.use(
  function (response) {
    return response.data;
  },
  function (error) {
    return Promise.reject(error);
  }
);

export default instance;

--------再新建一个文件为api在这里面新建一个Home.js

// 请求API
import request from "@/utils/request.js";

// icon
export const recommendMusic = params =>
  request({
    url: "/homepage/dragon/ball",
    params
  });

// 推荐歌单
export const recommednsong = params =>
  request({
    url: "/personalized/newsong",
    params
  });

--------在api中再创建一个文件为index.js文件将api接口导出

import {recommendMusic,recommednsong } from './Home'


export const recommendMusicAPI =recommendMusic
export const recommednsongAPI=recommednsong

-----------最后一步来了，就是来渲染咱们的页面-----创建一个vue的文件

// 先进行导入index.js
import  { recommendMusicAPI,recommendsonAPI }  form  '@/api/index.js'



export default {
  data() {
    return {
      iconList: [],
      songList: [],
    };
  },
// 在钩子函数中created进行接收函数
  async created() {
    const res = await recommendMusicAPI();
    const res2 = await recommednsongAPI({
      limit: 3,
    });
    this.iconList = res.data.data;
    this.songList = res2.data.result;
  },
};

总结一下

（1）先创建一个utils文件夹，在其文件夹中创建request.js文件---->来配置一下axios

（2）在创建一个api文件夹，在其文件夹中创建index.js 和 home.js文件

（3）在home.js文件中，来发送url的请求

（4）在index.js文件中，来导出home.js的url中的数据

（5）在vue中的文件中来进行渲染api中的index.js数据