Vue中请求的封装（axios的封装）

步骤

1、先在项目中安装axios(npm install --save axios),并在main.js中引入（import axios from ‘axios’）

2、在views文件夹的同级建一个文件夹，命名随便（我一般命名为api）

3、再在api文件夹中建立两个js文件,分别命名为index.js和request.js

4、在index.js文件中直接放上以下代码（注意URL要换成自己的所请求的那个地址）：

import axios from 'axios'

axios.defaults.baseURL = `填写请求的地址`;
// 添加请求拦截器
// 在发送请求之前做些什么
axios.interceptors.request.use((config) => {
    return config;
})
// 添加响应拦截器
axios.interceptors.response.use((response) => {
    // 对响应数据做点什么
    return response
}, err => {
    // 对响应错误做点什么
    return Promise.reject(err);
})

export default axios

5、在request.js文件放上你所要请求后端数据数据的接口：

import axios from '.'  //import axios from './index' 导入axios

//下面写的是你所要请求数据的接口
export function getLists(pageNo, pageSize) {   //分页列表的数据
    //return axios.get('/home/page/1/10')
    return axios({
        method: 'get',
        url: `/home/page/${pageNo}/${pageSize}`
    })
}

 export function getDetail(data) {   //获取详情页
    return axios({
         method: 'get',
         url: `/detail`,
        params: data
     })
 }

6、在需要发送请求的页面导入对应的接口即可

一个简单的请求封装就已经完成了，如有错误的地方欢迎指正，我会及时更正~~~