vue2 + axios + mock.js封装过程，包含mock.js获取数据时报404状态的解决记 ...

vue + axios + mock.js
以下是封装的过程，记载一下
1、首先先相识什么是mock.js的用途及特点
       官网地址：Mock.js (mockjs.com)
       作用：生成随机数据，拦截 Ajax 请求
       上风：

2、相识axios的原理及利用
        官网地址：Axios中文文档 | Axios中文网 (axios-http.cn)
        作用：Axios 是一个基于 promise 的网络请求库，可以用于欣赏器和 node.js

----------------------以上均认为你已相识后，接下来开始封装----------------------

1、首先安装依靠包

1. npm install mockjs --save-dev
2. npm install axios --save

复制代码

2、添加环境变量，以便在后续与后端对接接口时方便更改（根据自己的情况更改）
        开辟环境：.env.development
                

        生成环境：.env.production
                

      在随便一个vue文件中能conlog.log(process.env.VUE_APP_BASE_URL)打印出来就是设置好了
3、在src下面创建一个utils文件夹，创建一个request.js文件

1. import axios from "axios";
3. const request = axios.create({
4.   baseURL: process.env.VUE_APP_BASE_URL, // 设置默认的
5.   timeout: 5000, // 设置默认的请求超时时间
6. });
7. // 添加请求拦截器
8. request.interceptors.request.use(
9.   (config) => {
10.     // 在发送请求
11.     return config;
12.   },
13.   (error) => {
14.     // 对请求错误做些什么
15.     return Promise.reject(error);
16.   }
17. );
18. // 添加响应拦截器
19. request.interceptors.response.use(
20.   (response) => {
21.     // 对响应数据做点什么
22.     return response.data;
23.   },
24.   (error) => {
25.     // 对响应错误做点什么
26.     return Promise.reject(error);
27.   }
28. );
30. export default request;

复制代码

4、在utils中创建一个mock.js的文件
    这个文件里可以设置你需要的api的字段，以下示例 '/api/list'，'get'请求

1. import Mock from "mockjs";
3. Mock.mock("/api/list", "get", () => {
4.   return Mock.mock({
5.     code:200,
6.     "data|1-10": [
7.       {
8.         id: "@id", //随机生成id
9.         name: "@cname", //随机生成中文名字
10.         "age|18-60": 1, //随机生成18-60的数字
11.         "sex|1-2": 1, //随机生成1-2的数字
12.         "salary|1000-10000": 1, //随机生成1000-10000的数字
13.         "birthday": "@date", //随机生成日期
14.         "time": "@time", //随机生成时间
15.         "content": "@cparagraph", //随机生成中文段落
16.         "img": "@image('200x100', '#50B347', '#FFF', 'png', 'Mock.js')", //随机生成图片
17.         "address": "@county(true)", //随机生成地址
18.         "email": "@email", //随机生成邮箱
19.         "ip": "@ip", //随机生成ip
20.         "url": "@url", //随机生成url
21.       },
22.     ],
23.   });
24. });

复制代码

5、在main.js中引入utils中的这个mock.js
     

6、接着，在src文件下再创建一个api文件夹，并创建一个user.js文件
      在user.js文件下引入封装好的request.js文件，然后把刚刚在mock.js中创建的'/api/list'袒暴露去

1. import request from '@/utils/request'
3. export function getCase() {
4.   return request({
5.     url: '/api/list',
6.     method: 'get'
7.   })
8. }

复制代码

7、随便创建一个vue文件，现在开始测试
        

        打印后得到：
            404 !

----------------------报404状态码，哈哈哈哈哈哈哈哈哈哈哈哈哈----------------------

----------------------不过没关系，接着来：----------------------

我先告诉你那里的错误吧，然后接着再跟你分享原因
问题就在这个 baseURL

解决过程：
1、既然我封装的报了错，那我就用原生的测试一下有没有数据
      a、在main.js中引入axios：

1. import axios from 'axios'
2. Vue.prototype.$axios = axios

复制代码

      b、在刚刚的vue文件中用原生的测试一下

1. mounted() {
2.     // 封装的
3.     getList().then(res => {
4.       console.log(res);
5.     })
6.     // 原生的
7.     this.$axios.get('/api/getList')
8.       .then(function (response) {// 处理成功情况
9.         console.log(response);
10.       })
11.       .catch(function (error) {// 处理错误情况
12.         console.log(error);
13.       })
14.       .finally(function () {// 总是会执行情况
15.         debugger
16.       });
17.   },

复制代码

c、此时发现，封装的404，原生的乐成了；
     

     这时发现封装的请求URL是''http://localhost:8080/api/getList''
      

     那我们就把这个'http://localhost:8080'，加到原生的地址上面去结果也是404，那就晓得了，直接找到request.js，把baseURL的地址设为空就好了。

至此。











免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。