Vue2中axios的二次封装

1. 创建api文件夹

2. 在api目录下创建request.js

import axios from "axios";

const request = axios.create({
    // 如果是本地服务器可以直接填地址，否则要配置跨域
    baseURL: 'http://localhost:3000',
	timeout: 30 * 1000, //请求超时时间：30秒
	withCredentials: false // 表示跨域请求时是否需要使用凭证
});

// 请求拦截器
request.interceptors.request.use(
	config => { //配置信息处理
		return config;
	},
	error => { //错误处理
		console.log(error);
		return Promise.reject(error);
	}
);

// 响应拦截器
request.interceptors.response.use((res) => { // 请求成功的回调函数
	// console.log(res);
	// return  res.data;
	return  res;
},(err) => { // 请求失败的回调函数
    return Promise.reject('fail');
});

export default request;

3. 在api目录下创建index.js(用于编写接口)

import request from './request.js'

// get请求示例
export function getGoodsList() {
    return request({
        url:'/webshop/getGoodsInfo',
        method:'GET'
    })
}

// post请求示例（这里的params参数传到node服务器上不知道为什么变成了query参数）
export function getGoodsImg(params) {
    return request({
        url: '/webshop/getGoodsImg',
        method: 'POST',
        params
    })
}

4. 配置跨域(请求服务器非本地服务器)

//在vue.config.js中修改
module.exports = defineConfig({
  //代理跨域
  devServer:{
    proxy: {
      "/": {
        //后台服务器地址
        target: "http://localhost:3000",
      }
    }
  }
})

5. 接口调用方法

// 先引用
import {getGoodsList} from '@/api/index'
// 再使用
getGoodsList()