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、首先安装依赖包

npm install mockjs --save-dev
npm install axios --save

2、添加环境变量,以便在后续与后端对接接口时方便更改(根据自己的情况更改)

        开发环境:.env.development

                

        生成环境:.env.production

                

      在随便一个vue文件中能conlog.log(process.env.VUE_APP_BASE_URL)打印出来就是配置好了

3、在src下面创建一个utils文件夹,创建一个request.js文件

import axios from "axios";

const request = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL, // 设置默认的
  timeout: 5000, // 设置默认的请求超时时间
});
// 添加请求拦截器
request.interceptors.request.use(
  (config) => {
    // 在发送请求
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);
// 添加响应拦截器
request.interceptors.response.use(
  (response) => {
    // 对响应数据做点什么
    return response.data;
  },
  (error) => {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default request;

4、在utils中创建一个mock.js的文件

    这个文件里可以配置你需要的api的字段,以下示例 '/api/list','get'请求

import Mock from "mockjs";

Mock.mock("/api/list", "get", () => {
  return Mock.mock({
    code:200,
    "data|1-10": [
      {
        id: "@id", //随机生成id
        name: "@cname", //随机生成中文名字
        "age|18-60": 1, //随机生成18-60的数字
        "sex|1-2": 1, //随机生成1-2的数字
        "salary|1000-10000": 1, //随机生成1000-10000的数字
        "birthday": "@date", //随机生成日期
        "time": "@time", //随机生成时间
        "content": "@cparagraph", //随机生成中文段落
        "img": "@image('200x100', '#50B347', '#FFF', 'png', 'Mock.js')", //随机生成图片
        "address": "@county(true)", //随机生成地址
        "email": "@email", //随机生成邮箱
        "ip": "@ip", //随机生成ip
        "url": "@url", //随机生成url
      },
    ],
  });
});

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

     

6、接着,在src文件下再创建一个api文件夹,并创建一个user.js文件

      在user.js文件下引入封装好的request.js文件,然后把刚刚在mock.js中创建的'/api/list'暴露出去

import request from '@/utils/request'

export function getCase() {
  return request({
    url: '/api/list',
    method: 'get'
  })
}

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

        

        打印后得到:

            404 !

----------------------报404状态码,哈哈哈哈哈哈哈哈哈哈哈哈哈----------------------

----------------------不过没关系,接着来:----------------------

我先告诉你哪里的错误吧,然后接着再跟你分享原因

问题就在这个 baseURL

解决过程:

1、既然我封装的报了错,那我就用原生的测试一下有没有数据

      a、在main.js中引入axios:

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

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

mounted() {
    // 封装的
    getList().then(res => {
      console.log(res);
    })
    // 原生的
    this.$axios.get('/api/getList')
      .then(function (response) {// 处理成功情况
        console.log(response);
      })
      .catch(function (error) {// 处理错误情况
        console.log(error);
      })
      .finally(function () {// 总是会执行情况
        debugger 
      });
  },

c、此时发现,封装的404,原生的成功了;

     

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

      

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

至此。

  • 30
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

C.果栗子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值