axios封装使用

最新推荐文章于 2024-07-25 22:35:58 发布

Teal-in

最新推荐文章于 2024-07-25 22:35:58 发布

阅读量216

点赞数

分类专栏：工具文章标签： javascript 前端 vue.js es6

本文链接：https://blog.csdn.net/Teal__/article/details/108716128

版权

本文详细介绍了如何在JavaScript环境中，特别是在Vue.js项目中，对axios库进行封装，以提高前端HTTP请求的统一性和效率。通过使用ES6特性，创建一个自定义的axios实例，设置默认配置，处理响应数据和错误，以及实现拦截器来增强功能。

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

//下载 axios && qs
// 导出axios模块
import axios from 'axios'
// 导入qs模块
import qs from 'qs'
// 设置开发环境(生产环境)
switch (process.env.NODE_ENV) {
    case 'production':
        axios.defaults.baseURL = 'http://tealseaproduction:80';// 开发环境
        break;
    case 'test':
        axios.defaults.baseURL = 'http://tealseatest:3000';// 测试环境
        break;
    default:
        axios.defaults.baseURL = 'http://tealseadevelop:3000';// 开发环境
};
// 设置超时时间(十秒)
axios.defaults.timeou = 10000;
// 设置跨域请求携带凭证(是)
axios.defaults.withCredentials = true;
//设置请求参数格式(x-www-form-urlencoded)
axios.defaults.headers['Content-Type'] = "application/x-www-form-urlencoded";// 格式xxx=xxx&&xxx=xxx
//将json格式转换为x-www-form-urlencoded格式[ tranformRequest只对post请求起作用, data是传递的参数 ]
axios.defaults.transformRequest = data => qs.stringify(data);//将{name=xxx,age=xx}=>name=xxx&&am