二次封装ajax和axios-Toy模板网

这篇具有很好参考价值的文章主要介绍了二次封装ajax和axios。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

ajax

app.config.globalProperties.$http = function(url, method, data, async, fun) {
	$.ajax({
		url: baseUrl + url, //请求地址
		type: method,   //请求方式
		dataType: 'json',  //数据类型
		contentType: "application/json",
		xhrFields: {  //跨域设置
			withCredentials: true
		},
		headers: {
			"token":localStorage.getItem("token") //请求头设置token验证
		},
		async: async,  //开启异步请求 true/false
		data: JSON.stringify(data),  //携带数据转换为字符串
		success: function(resp) {  //请求成功后的操作
			if (resp.code == 200) {
				fun(resp)
			} else {
				ElMessage.error({
					message: resp.msg,
					duration: 1200
				});
			}
		},
		error: function(e) {  //请求失败后的操作
			if (e.status == undefined) {
				ElMessage.error({
					message: "前端页面错误",
					duration: 1200
				});
			} else {
				let status = e.status
				if (status == 401) {
					router.push({
						name: 'Login'
					})
				} else {
					ElMessage.error({
						message: e.responseText,
						duration: 1200
					});
				}
			}

		}
	})
}

axios

/对于axios函数库进行二次封装
//你工作的时候axios是否进行二次封装？
// 目的1：利用axios请求，响应拦截器功能
// 目的2：请求拦截器，一般看可以在请求头中携带公共参数：token
// 目的3：响应拦截器，可以简化服务返回的数据，处理http的网络错误
import axios from "axios";
import { ElMessage } from "element-plus";

//利用axios.create方法创建一个axios实例：可以设置基础路径、超时时间的设置
const request = axios.create({
  baseURL: "/api", //请求路径设置
  timeout: 5000, // 超时的时间设置，超出五秒请求就是失败的
});

// 请求拦截器
request.interceptors.request.use((config) => {
  //config:请求拦截器回调注入的对象(配置对象)，配置对象的身上最重要的一件事就是headers属性
  //可以通过请求头携带公共参数-token
  return config;
});

request.interceptors.response.use(
  (response) => {
    //响应拦截器成功的回调，一般会进行简化数据
    return response.data;
  },
  (error) => {
    // 处理http网络错误
    let status = error.response.status;
    switch (status) {
      case 404:
        //错误提示信息
        ElMessage({
          type: "error",
          message: "请求失败路径出现问题",
        });
        break;
      case 500 | 501 | 502 | 503 | 504 | 505:
        //错误提示信息
        ElMessage({
          type: "error",
          message: "服务器挂了",
        });
        break;
      case 401:
        ElMessage({
          type: "error",
          message: "参数有误",
        });
        break;
    }

    return Promise.reject(new Error(error.message));
  }
);

export default request;

文章来源地址https://www.toymoban.com/news/detail-634059.html

到了这里，关于二次封装ajax和axios的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！