一、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
})