封装axiso,封装接口,跨域

最新推荐文章于 2023-08-16 08:58:28 发布

阿玺呀

最新推荐文章于 2023-08-16 08:58:28 发布

阅读量301

点赞数 1

分类专栏： vue时掉的坑

本文链接：https://blog.csdn.net/safastate/article/details/114798085

版权

本文介绍了在Vue项目中如何封装axios以优化代码维护，并展示了如何在src/utils/request.js中进行配置。同时，为了解决跨域问题，文章详细讲解了在vue.config.js中设置proxy属性的方法。

摘要由CSDN通过智能技术生成

封装是为了后期的代码维护
**
配置axios 在src中新建文件夹utils在新建request.js文件
**


//导入axios
import axios from 'axios'

//创建axios的实例
const request = axios.create({
    baseURL:'/dev',  //配置基准路径
    timeout:5000,     //请求时间
})

// 添加请求拦截器
request.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
request.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

//抛出request 
export default request

封装接口
在src中新建文件夹 api 在新建相对应的文件
如登录注册 --login.js


//现在request文件就是被axios的实例后的对象
//因此只需要引入request 
import request from '../utils/request'

//注册接口 两种方式  全部导出export  default{} 和按需导出
//按需导出时 import 需要解构赋值
//在调用时,使用不了.the