vue封装axios请求api

第一种

先创建utils文件创建http.js和requset.js文件 在创建一个api文件创建任意js文件 index.js 然后下载安装axios 在http.js文件中写入代码如下

js文件中写入代码如下

import axios from "axios"; 
const http = axios.create({

    baseURL: "/api",
    timeout: 10000

})
 
// 请求拦截
http.interceptors.request.use(config => {

    return config

}, err => {

    throw new Error(err)

})
 
 
// 响应拦截
http.interceptors.response.use(res => {

    return res.data

}, err => {

    throw new Error(err)

})
 
export default http; 

然后再requset文件中写入代码如下

import http from "./http";
 
function request({ method = 'get', url, data = {}, params = {} }) {
    return http({
        method,
        url,
        data,
        params
    })
}
 
export default request;

import request from "../utils/requset";
// 用户登陆的接口
export const cnode = () => request({ url: '/home' });

第二种

先在src文件夹下新建两个js文件一个是http.js  一个是request.js文件

在http.js文件中写下列代码

import axios from "axios";
const Axios = axios.create({
  baseURl: "  (请求的公共路径)  ",
  timeout: 10000,  //请求超时时间
});
Axios.interceptors.request.use((config) => {
  return config;
});
Axios.interceptors.response.use(
  (config) => {
    return config;
  },
  (err) => {
    return Promise.reject(err);
  }
);
export default Axios;


例：

import axios from "axios";
const Axios = axios.create({
  baseURl: "https://blog.csdn.net/Helloxd020406",
  timeout: 10000,
});
Axios.interceptors.request.use((config) => {
  return config;
});
Axios.interceptors.response.use(
  (config) => {
    return config;
  },
  (err) => {
    return Promise.reject(err);
  }
);
export default Axios;

在request.js中写下

import http from "./http.js"; 
var baseURl = "  (请求的公共路径)   ";
export const 请求的方法 = (请求页传递过来的参数) => {
  return http.get(baseURl + " 接口 ", {
    params: content  ,  //需要请求的数据
  });
};

例

import http from "./http.js";
var baseURl = "https://blog.csdn.net/Helloxd020406";
export const getList = (page) => {
  return http.get(baseURl + "/rl", {
    params: page,
  });
};

在请求页写下

 getList(this.请求的参数).then((res) => {
      console.log(res);
      this.arr = res.data.result.list;  //赋值把请求后的赋给数组
    });


例

  getList(this.page).then((res) => {
      console.log(res);
      this.arr = res.data.result.list;
    });