ajax和axios封装plus

一、ajax的封装方式

1.ajax网络请求无法分离的例子

使用ajax的时候，是不是一直被困扰，网络请求代码和逻辑代码混合在一起却无法分离，比如下面的的代码：

这是我以前写一个网页的逻辑代码，无非就是初始化，拿取数据，渲染数据，然后渲染数据和拿取数据（发送网络请求）的数据一直分离不开，以前尝试过封装但是一直失败，数据只要出了success这个回调函数就失效了一般，也保存不了，因为那个时候项目周期短也不大就凑合着写完了，今天因为另外一个项目发现了新大陆。

init: function() {
		var _that = this
		
		$.get(init.baseUrl + "/article/categoryPageArticle", {
				categoryId: _that.categoryId,
				currentPage: _that.currentPage
			},
			function(data) {
				var res = data.data //拿到数据
		
				var box = new CustomPagination('#page', {
					total: res.pages, //总页数
					count: 6, //显示的页码个数，多余页码会用...代替
					inupt_forward: 'no', //是否开启[输入跳转]
					changePage: function(pageNum) { //切换页码成功回调
					_that.currentPage = pageNum
						_that.get_list()
					}
				});
		
			});
	},

2.封装ajax网络请求代码的方法

因为return data不尽人意，来自以前封装axios的方法，我试了一下return 整个ajax，结果出乎我的意料。

打印结果，

于是拿到responseText，发现是一个json数据，于是转成对象，在打印，成功了

 下面贴上完成代码，实例 ：注册实例

封装的网络请求代码 在request.js下，引入到register.html下

/* 
封装所有的网络请求 
 */



/**
 * @param {Object} registerDto
 * @return {object} msg
 */

var req = {

	// 用户提交网络请求
	submit_register: function(registerDto) {
		// this.res = null;
		return $.ajax({
			type: "POST",
			url: init.baseUrl + "/jjshipping/user/register",
			data: registerDto,
			success: function(data) {
			},
			error: function() {
				console.log("服务器异常，连接失败")
			},
		})
	}

}

在逻辑代码，register.js里面调用request.js里面的方法请求数据

所以本来很长的ajax变成了三行，其实一行也可以，为了方便阅读，写成了三行

// 提交事件
$("#submit").click(function(e) {

	// 先判空
	isnull()
	var userName = $.trim($("#userName").val())
	var passWord = $.trim($("#passWord").val())
	var email = $.trim($("#email").val())
	var realName = $.trim($("#realName").val())
	var address = $.trim($("#address").val())
	var zipcode = $.trim($("#zipcode").val())
	var telephone = $.trim($("#telephone").val())
	var phoneNumber = $.trim($("#phoneNumber").val())

	var registerDto = {
		"userName": userName,
		"passWord": passWord,
		"realName": realName,
		"phoneNumber": phoneNumber
	}
	
	var res = req.submit_register(registerDto)//获取整个ajax
		res = res.responseText//拿取responseText
		res = JSON.parse(res)//转js对象
		
	if (res.code == 200) {
		alert("注册成功");
	} else {
		alert("账户已存在");
	}
	console.log(res);
	e.preventDefault();
})

二、axios封装方式

以获取文章接口为例

1.全局网络封装配置

 

request.js

import axios from 'axios'


export function request(config) {
	// 1.创建axios实例
	const instance = axios.create({
		
		// baseURL: "https://lllmk.utools.club/",
		// baseURL: "http://47.137.136.3:8081/",//公安
		baseURL: "http://47.93.63.155:8081/",//测试
		// baseURL: "http://192.168.137.1:8081/",
		timeout: 50000,
		headers: {
			"Content-Type": "application/json",
		},
		// withCredentials: true, // send cookies when cross-domain requests
		// crossDomain: true
	})
	//2.1请求拦截的作用
	instance.interceptors.request.use(
		config => {

			// config.headers['Content-Type'] = 'text/plain' // 关键所在			
			return config
		},
		err => {
			console.log(err)
			// if(err.response.status === 401) {
			//   this.$store.commit("REMOVE_INFO")
			//   this.$router.push("/Login")
			// }
		})

	// 2.2相应拦截
	instance.interceptors.response.use(
		res => {
			// console.log(res)
			
			return res
		},
		err => {
			console.log(err)
		})


	// 3.发送真正的网络请求
	return instance(config)
}

重点：getArticle.js 

 

/*  获取文章 */
import {
	request
} from './request.js'

// // 按分类查询文章
export function categoryToArticle(categoryId) {
	return request({
		url: "/article/categoryArticle",
		method: "get",
		params: {
		   categoryId: categoryId
		 },
	})

}
// 按分类分页查询文章
export function categoryPageArticle(articleParams) {
	return request({
		url: "/article/categoryPageArticle",
		method: "get",
		params: {
		   categoryId: articleParams.categoryId,
		   currentPage:articleParams.currentPage
		 },
	})

}

// 按分页查询文章
export function pageToArticle(categoryId) {
	return request({
		url: "/article/pageArticle",
		method: "get",
		params: {
		   currentPage: currentPage
		 },
	})

}

重点：article.vue

在组件总导入方法

import {
		categoryToArticle,
		idToCategoryName,
		categoryPageArticle
	} from "network/getArticle.js"

 导入之后，在周期函数中使用

categoryPageArticle(articleParams)
					.then(res => {
						const result = res.data.data
						console.log(result)
						this.articleList = result.records
						this.recordsInfo = result
					})