【黑马程序员】前端开发之Vue项目实战44：pagenum报错问题（axios二次封装）

pagenum报错原因

我是对axios进行过简单的二次封装的，在请求后端users列表时出错“pagenum无参数”，看了下请求拦截器中的config发现是传参出的问题。因为使用的是get请求，但参数没有用params传过去，导致出错。下面先给出axios的封装过程：

axios的二次封装

	import axios from 'axios'
	
	//1. 创建axios对象
	const service = axios.create({
	  baseURL: 'http://127.0.0.1:8888/api/private/v1'
	})
	
	//2. 请求拦截器
	service.interceptors.request.use(
	  config => {
	    config.headers.Authorization = window.sessionStorage.getItem('token')
	    console.log(config)
	    return config
	  },
	  error => {
	    Promise.reject(error)
	  }
	)
	
	//3. 响应拦截器
	service.interceptors.response.use(
	  response => {
	    //判断code码
	    return response.data
	  },
	  error => {
	    return Promise.reject(error)
	  }
	)
	
	export default service

将api整合到一个文件中

	import request from './request'
	
	// 登录
	export function loginhandle(data) {
	  return request({
	    url: '/login',
	    method: 'post',
	    data
	  })
	}
	
	// 获取所有菜单
	export function getMenuList() {
	  return request({
	    url: '/menus'
	  })
	}
	
	// 获取用户菜单
	export function getUserList(data) {
	  return request({
	    url: '/users',
	    data
	  })
	}

解决方案

将api接口中getUserList函数的参数换成params，在传参时直接传入请求参数queryInfo即可。

	 // 请求参数
	  const queryInfo = {
	    query: '',
	    pagenum: 1,
	    pagesize: 2
	  }
	
	  getUserList(queryInfo).then(res => {
	    console.log(res)
	  })